- 浏览: 691920 次
- 来自: ...
文章分类
最新评论
-
ranguisheng:
可以加点注释,代码不便于阅读.
用java实现数据库连接池的一个简单示例 -
abcd880129:
这样写的话,还要用专门的下载工具,不然,只能下到一个为空的ex ...
ZK下载文件时,不在服务器生成文件直接下载 -
234369425:
同上,是20
java计算阶乘 -
CodeToMyLaw:
如果目录中含有中文呢?
[^\x00-\xff] 中文的 ...
js验证文件目录格式的正确性 -
yanzhoupuzhang:
加了,还是报那个错误!
org.apache.commons.dbcp.BasicDataSource的解决方法
转载:http://hi.baidu.com/javajavajava/blog
不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去。
不在详细的说明代码了,帖出代码之前需要说明一点儿的是IE环境下,由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉页面中全部的select元素,而关系窗口时让其再显示出来。呵呵,方法比较笨,但实在想不出来更好的办法了。
不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去。
不在详细的说明代码了,帖出代码之前需要说明一点儿的是IE环境下,由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉页面中全部的select元素,而关系窗口时让其再显示出来。呵呵,方法比较笨,但实在想不出来更好的办法了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>页面中弹出小窗口,页面背景直接变半透明-webjx.com</title> <style> html,body{font-size:12px;margin:0px;height:100%;} .mesWindow{border:#666 1px solid;background:#fff;} .mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;} .mesWindowContent{margin:4px;font-size:12px;} .mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff} </style> <script> var isIe=(document.all)?true:false; //设置select的可见状态 function setSelectState(state) { var objl=document.getElementsByTagName('select'); for(var i=0;i<objl.length;i++) { objl[i].style.visibility=state; } } function mousePosition(ev) { if(ev.pageX || ev.pageY) { return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //弹出方法 function showMessageBox(wTitle,content,pos,wWidth) { closeWindow(); var bWidth=parseInt(document.documentElement.scrollWidth); var bHeight=parseInt(document.documentElement.scrollHeight); if(isIe){ setSelectState('hidden');} var back=document.createElement("div"); back.id="back"; var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;"; styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;"; back.style.cssText=styleStr; document.body.appendChild(back); var mesW=document.createElement("div"); mesW.id="mesWindow"; mesW.className="mesWindow"; mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>"; styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;"; mesW.style.cssText=styleStr; document.body.appendChild(mesW); } function showBackground(obj,endInt) { obj.filters.alpha.opacity+=1; if(obj.filters.alpha.opacity<endInt) { setTimeout(function(){showBackground(obj,endInt)},8); } } //关闭窗口 function closeWindow() { if(document.getElementById('back')!=null) { document.getElementById('back').parentNode.removeChild(document.getElementById('back')); } if(document.getElementById('mesWindow')!=null) { document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow')); } if(isIe){ setSelectState('');} } //测试弹出 function testMessageBox(ev) { var objPos = mousePosition(ev); messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>"; showMessageBox('窗口标题',messContent,objPos,350); } </script> </head> <body> <div style="padding:20px"> <div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div> <div style="text-align:left;padding-left:20px;padding-top:10px";><select><option>下拉</option></select>弹出窗口时会将其隐藏,关闭时会让其显示,目的是在IE中防止弹出的DIV挡不住下拉框</div> <div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div> <div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div> </div> </body> </html>
发表评论
-
Javascript刷新页面的实例
2017-10-02 16:49 455Javascript刷新页面的实例 Javascript刷 ... -
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2017-12-29 17:25 396/* Cross-Browser XMLHtt ... -
漂亮的Slider效果类终于封装成功
2015-04-16 20:38 0<!DOCTYPE html PUBLIC &quo ... -
用简单的脚本实现一款漂亮的下拉菜单
2015-04-16 20:33 0<!DOCTYPE html PUBLIC &quo ... -
Javascript操纵Cookie实现购物车程序
2015-04-16 20:31 0/************************** ... -
推荐:右键菜单
2015-04-16 20:30 0<!-- +++++++++++++++++++++ ... -
拖动层效果
2015-04-16 20:28 539<!DOCTYPE html PUBLIC &q ... -
发个自己写的表格操作类(添加,删除,排序,上移,下移)
2015-04-16 20:26 416<html> <head> ... -
cloneNode实现表格增加删除效果
2015-04-16 20:23 642<%@ page contentType= ... -
支持IE和FF的div+css选项卡
2015-04-16 20:22 494<!DOCTYPE html PUBLIC &quo ... -
一个分页的js
2015-04-16 20:20 447<!-- * 用js分页显示ul/ol的列表 ... -
JavaScript实现拖拽网页内元素的方法
2015-04-15 22:30 486/** * 跨平台的事件监听函数 * @param ... -
让IE浏览器支持HTML5标准的方法
2014-01-11 08:30 993让IE浏览器支持HTML5标准 ... -
Javascript上传图片
2014-01-11 08:25 2450<!DOCTYPE html PUBLIC &quo ... -
javascript ajax
2013-07-21 20:51 930<!DOCTYPE html PUBLIC &quo ... -
javascript表格和表单
2013-07-13 23:06 878<html> <head> & ... -
javascript事件
2013-07-07 20:53 906<!DOCTYPE html PUBLIC &quo ... -
javascript基础
2013-07-06 22:47 1068<!DOCTYPE html PUBLIC &quo ... -
Javascript 验证上传图片大小[客户端]
2012-11-17 13:36 1675需求分析: 在做上传 ... -
带Checkbox的列表框
2011-11-26 14:31 909<title>带Checkbox的列表框 ...
相关推荐
这里帖出两种效果,第一种是弹出时页面背景直接变为半透明,而第二种则对XP关机效果仿得更像一点儿,即背景是有一个逐渐变为半透明的过程,大家可以留心观察两种效果的区别,两种效果全部通过了IE6和firefox的测试。
网页中弹出小窗口,页面背景逐渐变为半透明! 很值得下载看看!资源免费,大家分享!!
需要我们弹出一些自定义控件或页面,同时用一层半透明的背景将页面的其他地方遮住,以防止用户的其他操作,以达到一种“模式窗口”的效果,这里给出一个实现此类效果,同时支持弹出自定义控件页面中通过委托更新主...
介绍: 不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下...
【网页特效代码-页面特效】网页中弹出小窗口,页面背景逐渐变为半透明
Xamarin.Android开发页面弹出悬浮框,弹出层遮挡底层主页面,悬浮框半透明。测试通过源码下载(图片源码没有上传),压缩文件中有最终效果拍照。
主要介绍了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果,涉及JavaScript弹出窗口的实现及页面元素属性动态变换的相关技巧,需要的朋友可以参考下
div+css登陆,DIV网页中弹出小窗口,页面背景逐渐变为半透明
3、弹出窗口圆角,窗口半透明,但内容不透明;带阴影; 4、窗口可拖动; 5、拖动停止之后,滚动页面时窗口位置不动; 6、可以使用jQuery; 7、有关闭按钮; 进一步功能具体描述: 点按钮,会有一个...
1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...
实例357 关闭弹出窗口时刷新父窗口 574 实例358 打开新窗口显示详细信息 575 实例359 弹出网页模式对话框 577 实例360 日期选择器 580 实例361 弹出提示对话框并重定向网页 584 实例362 打开指定大小的新...
样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。...
5.42 允许调整弹出窗口的大小... 143 5.43 弹出一个顶层窗口... 144 5.44 关闭窗口... 145 5.45 在主窗口上关闭弹出式窗口... 146 5.46 在弹出式窗口上关闭主窗口... 146 5.47 将主窗口中的资料输出到弹出式 ...
实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 4.1 文件上传 285 实例223 以二进制形式上传文件到数据库 285 实例224 上传文件到...
实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 4.1 文件上传 285 实例223 以二进制形式上传文件到数据库 285 实例224 上传文件到...
实例073 半透明背景的下拉菜单 106 实例074 展开式导航条 110 实例075 解释型菜单 111 实例076 自动隐藏的弹出式菜单 112 实例077 收缩式导航菜单 114 实例078 树状导航菜单 116 实例079 鼠标右键菜单...
一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...
6、新建“外部组合框_关闭列表”关闭已经弹出的下拉列表。 7、修正“文件_下载”不能下载的BUG,感谢易友【@新手来学易】反馈。 8、删除“文本_到小写m”删除该汇编命令,出现不兼容。 9、修正“系统_取MAC地址”未...
实例202 在关闭窗体时弹出确认对话框 270 实例203 隐藏应用程序在任务栏中的图标 272 实例204 实现动态系统托盘图标 272 实例205 实现气泡提示窗口 275 实例206 从桌面右下角显示的Popup窗口提醒 276 实例207 设置可...