js弹出的对话窗口永远保持居中显示

复制代码代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .Div_Scroll { position:fixed; margin:-10px; visibility:hidden; background-color:#808080; opacity:0.6; z-index:99; } .Div_Scroll_Content { position:relative; margin-top:20%; width:inherit; height:inherit; } .Div_AlertWindow { margin:auto; width:200px; height:100px; background-color:lightblue; border:5px solid #f00; } </style> <script type="text/javascript"> window.onload = function () { var alertWindow = $("alertParent"); alertWindow.style.width = window.screen.availWidth + "px"; alertWindow.style.height = window.screen.height + "px"; $("Sure").onclick = function () { alertWindow.style.visibility = "hidden"; } } function ShowAlert() { var alertWindow = $("alertParent"); alertWindow.style.visibility = "visible"; } $ = function (id) { return document.getElementById(id); } </script> </head> <body> <div id="alertParent" class="Div_Scroll"> <div class="Div_Scroll_Content"> <div id="AlertWindow" class="Div_AlertWindow"> <input type="button" id="Sure" value="close alert Dialog..." /> </div> </div> </div> <div style="height:1300px; padding-top:200px;" > <input id="alertButton" type="button" onclick="ShowAlert();" value="Show alert Dialog..."/> </div> </body> </html> 添加遮罩层

　　推荐阅读

　　2012世界末日倒计时代码原来没事虚惊一场

这款时世界末日倒计时源代码，程序上有JS控制器，是用于网页中显示的倒计时器，自己可以设定世界末日的开始时间，网页倒计时世界末日源代码直接复制就可以用，无需下载，直接便可使用网页倒计时世界末日源代>>>详细阅读

本文标题：js弹出的对话窗口永远保持居中显示

地址：http://www.17bianji.com/kaifa2/JS/22776.html

1/2 1