- 浏览: 373200 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
iwindyforest:
httpServletRequest.getRequestUR ...
request.getPathInfo() 方法的作用 -
stephansun:
多谢!解决了困扰半天的问题。
jetty7 No JSP support解决办法 -
1505643368:
...
java实现—身份证号码验证 -
布拉君君:
亲,为什么我测试以war包形式启动,总是报404错误啊,我写的 ...
jetty7内嵌代码配置 -
Lixh1986:
3楼的方法没问题效率:上面a[v] 是直接取值, 而 inde ...
JavaScript去掉数组中的重复元素
转载:http://hi.baidu.com/javajavajava/blog
不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在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>
速度撒
发表评论
-
junit in action 2nd note
2011-12-12 16:52 842The @Before and @After annotate ... -
linux查找并删除目录或者文件
2011-08-04 23:37 2217其实我对Linux是一无所知,今天突然有一个工作必须做,就 ... -
全角和半角转换
2011-02-24 17:42 1446转换说明 全角字符从的unicode编码从6528 ... -
Andorid“emulator: ERROR: unknown virtual device name”问题解决
2011-01-02 22:27 3005解决办法: 1.修改路径。即你的.Andro ... -
调整系统时间
2010-08-30 11:06 827设置系统 当前时间 #date -s '2008-6-8 ... -
学习资源
2010-08-15 15:32 943json:1.http://muquanli123.blog. ... -
ora-00604&ora-12705错误 问题解决
2010-02-17 22:14 2167使用myeclipse链接到oracle 9i数据库出现如下错 ... -
清除Tomcat页面缓存
2010-02-10 11:42 2665tomcat-清除缓存 方法一: con ... -
Linux修改时间的方法
2010-02-10 11:28 1013修改linux的时间可以使用date指令 在命令行输入: ... -
CSV文件格式小结
2010-02-02 16:42 6402CSV 即 Comma Separate Valu ... -
设计原则总结
2010-01-26 16:15 742找出应用中可能需要变化之处,把它们独立出来,不要和那些不需要 ... -
BB笔记
2010-01-25 17:13 777// 用户是否选择了这门课程。true表示选择了这门课程,fa ... -
UML类图各种标识法
2009-09-29 15:35 1111(1)------> 虚线箭头表示依赖关系(depen ... -
键盘对应ASCII码
2009-09-27 14:50 24880x1 鼠标左键0x2 鼠标右键 0x3 CANCEL 键 ... -
长期使用电脑,保护眼睛的颜色设置
2009-09-21 17:26 5364我在电脑前面长期的 ... -
jena学习思路
2009-08-17 10:04 3956在用protege建好本 ... -
在应用程序中利用Jena API处理OWL本体
2009-08-14 13:51 4286接触Semantic Web的时间还不是很长,所以现在写的这方 ... -
Protege OWL Tutorial 笔记
2009-08-13 10:25 21713.2.1 Individuals(个体) 表示在 ... -
当前几个主要的Lucene中文分词器的比较
2009-08-10 09:35 22581. 基本介绍: paoding :Lucene ... -
新概念英语背诵经验
2009-07-21 13:56 1769《新概念英语》30年不衰说明她的确是一本好书。 ...
相关推荐
弹出登录页面,背景变暗 弹出登录页面,背景变暗 弹出登录页面,背景变暗
NULL 博文链接:https://highping.iteye.com/blog/362231
由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉页面中全部的select元素,而关系窗口时让其再显示出来。...
实现了弹出窗口后背景变灰并屏蔽实现了弹出窗口后背景变灰并屏蔽e
弹出居中DIV窗口,背景逐渐变暗,可以在调用时直接定义窗口的大小
网页中弹出小窗口,页面背景逐渐变为半透明! 很值得下载看看!资源免费,大家分享!!
div+css实现弹出窗口背景变暗效果 div+css实现弹出窗口
效果很酷,实用,代码简单易懂,点击用户登陆即可在当前页面上弹出一个登陆框且背景变暗。
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
网页弹出小窗口背景透明 网页弹出小窗口背景透明
网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv=”content-Type” content=”text/html;charset=gb2312″><!–把下面代码加到<head>与</head>之间–><...
javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口
实现在一个网页中间的弹出自己喜欢的窗口,可以根据自己的需要来更新
随着pupop窗口弹出,主页面逐渐变暗。里面有事例视频演示。
网页上div拖拽,弹出div背景变暗 网页上div拖拽,弹出div背景变暗
NULL 博文链接:https://highping.iteye.com/blog/362230
jquery弹出层背景变暗 Ajax jquery弹出层背景变暗_Ajax
JQuery实现对话框效果 即弹出对话框背景变暗且不可操作
又一个简洁实用的jquery弹出框插件,可实现弹出提示框、弹出引用其他URL框、弹出确认框,可以设置在屏幕中显示的位置(正中间)、设置弹窗事件、添加窗口...当弹出浮动对话框后,网页背景变暗,弹出层且支持关闭功能。
提交成功后弹出页面+弹出窗口 弹出页面+弹出窗口 弹出页面+弹出窗口