页面中弹出小窗口,页面背景直接变半透明
来源:互联网 发布:淘宝订单有没有限额 编辑:程序博客网 时间:2024/04/28 17:21
<!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>
- 页面中弹出小窗口,页面背景直接变半透明
- 页面中弹出小窗口,页面背景直接变半透明
- 网页中弹出小窗口(页面背景直接半透明)
- 网页中弹出小窗口,页面背景逐渐变为半透明
- 网页中弹出小窗口,页面背景逐渐变为半透明
- 网页中弹出小窗口,页面背景逐渐变为半透明
- 网页中弹出小窗口,页面背景逐渐变为半透明
- 弹出窗口,页面背景逐渐变为半透明
- 弹出窗口悬浮,背景页面变灰,类似网易邮箱的半透明信息提示效果
- 弹出窗口悬浮,背景页面变灰,类似网易邮箱的半透明信息提示效果
- 关于在C#中弹出窗口并跳转页面
- jsp中弹出对话框,页面跳转
- SL中弹出页面的另一种方法
- asp.net AJAX 定期刷新页面,然后,在 Timer 的事件中弹出窗口
- asp.net AJAX 定期刷新页面,然后,在 Timer 的事件中弹出窗口
- BMC Remedy AR在Web页面中弹出窗口的大小的控制
- BMC Remedy AR在Web页面中弹出窗口的大小的控制
- c#中弹出客户端窗口显示变量值
- 一个CSS+div高度自适应布局模型
- JSP+SQL2000开发环境安装配置
- Symbian学习笔记(17) - 初探WebServices API的使用(上)
- 网页特效代码:打开层/关闭层
- CSS “点”“井号”的含义and ID class区别?
- 页面中弹出小窗口,页面背景直接变半透明
- 今天开博
- 用链接控制页面小窗口的打开和关闭
- 同志们冲啊!
- 摒弃本位意识 改善沟通效果
- 关于servlet中web.xml的一些问题
- Java中文排序
- javascript中闭包的使用
- Windows / SQL Server 2005 的排序规则