日期:2014-05-17 浏览次数:20691 次
<html> <head> <script> function reSizeWindow() { var shadow = document.getElementById("shadow"); var dialog = document.getElementById("dialog"); shadow.style.width = parseInt(document.body.clientWidth) + parseInt(document.body.scrollLeft); shadow.style.height = parseInt(document.body.clientHeight) + parseInt(document.body.scrollTop); dialog.style.left = parseInt(document.body.clientWidth)/2 - parseInt(dialog.style.width)/2 + parseInt(document.body.scrollLeft); dialog.style.top = parseInt(document.body.clientHeight)/2 - parseInt(dialog.style.height)/2 + parseInt(document.body.scrollTop); } function openWindow() { document.getElementById("shadow").style.display = "block"; document.getElementById("dialog").style.display = "block"; reSizeWindow(); } function closeWindow() { document.getElementById("shadow").style.display = "none"; document.getElementById("dialog").style.display = "none"; } </script> <style type="text/css"> .dialogStyle { background:red; position:absolute; display:none; text-align:right; z-index:2; } .shadowStyle { position:absolute; left:0px; top:0px; display:none; filter:alpha(opacity=30); opacity:0.3; background:gray; z-index:1; } </style> </head> <body style="margin:0px 0px 0px 0px;"> <input type="button" onclick="openWindow()" value="open" style="margin-left:100px;margin-top:100px;"/> <div id="dialog" class="dialogStyle" style="width:200px;height:200px;"> <input type="button" value="close" onclick="closeWindow()"/> </div> <div id="shadow" class="shadowStyle"> </div> <!--width:200px;height:200px;background:red;position:absolute;display:none;text-align:right;z-index:2;--> <!--position:absolute;left:0px;top:0px;display:none;filter:alpha(opacity=30);opacity:0.3;background:gray;z-index:1;--> <script> window.onresize = function() { reSizeWindow(); } window.onscroll = function() { reSizeWindow(); } for(var i = 0;i < 100;i++) { document.write("<br