<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{ margin:0px; } #wrap{ background:black; opacity:0.3; filter:alpha(apacity=30); position:absolute; left:0px; top:0px; display:none; } #box{ 300px; height:200px; padding:10px; background:white; border:5px solid #333; position:absolute; display:none; } #close{ position:absolute; right: 5px; top: 5px; text-decoration: none; color: black; } #close:hover { background: #333; color: white; } </style> <script type="text/javascript"> window.onload = function () { var obtn = document.getElementsByTagName('input')[0]; var owrap = document.getElementById('wrap'); var obox = document.getElementById('box'); var oa = document.getElementById('close'); oa.onclick = function () { owrap.style.display = 'none'; obox.style.display = 'none'; } obtn.onclick = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; owrap.style.display = 'block'; owrap.style.width = Math.max(document.documentElement.clientWidth,document.body.offsetWidth) + 'px'; owrap.style.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) + 'px'; obox.style.display = 'block'; obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px'; obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px'; }; window.onscroll = function () { if(obox.style.display == 'none') return; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px'; obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px'; }; window.onresize = function () { if(obox.style.display == 'none') return; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; owrap.style.width = Math.max(document.documentElement.clientWidth,document.body.offsetWidth) + 'px'; owrap.style.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) + 'px'; obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px'; obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px'; }; } </script> </head> <body style="height:2000px;"> <input type="button" value="登陆"> <div id="wrap"></div> <div id="box"> <a href="javascript:;" id="close">x</a> 这里是登陆的表单等内容 </div> <div> </body> </html>