CSS代码：
#mask {background: black; opacity: 0.3; filter: alpha(opacity=30); position: absolute; left: 0; top: 0; display: none;} #box { width: 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;}
HTML代码：
<body style="height:2000px;"> <input type="button" value="登陆" id="btn" /> <div id="mask"></div> <div id="box"> <a href="javascript:;" id="close">×</a> 内容显示区域 </div> </body>
JS代码：
window.onload = function(){ var oBtn = document.getElementById('btn'); var oMask = document.getElementById('mask'); var oBox = document.getElementById('box'); var oClose = document.getElementById('close'); oClose.onclick = function(){ oMask.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; oMask.style.display = 'block'; oMask.style.width = Math.max(document.body.offsetWidth ,document.documentElement.clientWidth) + 'px'; oMask.style.height = Math.max(document.body.offsetHeight ,document.documentElement.clientHeight) + '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(oMask.style.display == 'none') return; oMask.style.left = Math.max(document.body.offsetWidth ,document.documentElement.clientWidth); oMask.style.top = Math.max(document.body.offsetHeight,document.documentElement.clientHeight); if(oBox.style.display == 'none') return; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oBox.style.left = (document.documentElement.clientWidth - oBox.offsetWidth)/2 + scrollLeft + 'px'; oBox.style.top = (document.documentElement.clientHeight -oBox.offsetHeight)/2 + scrollTop + 'px'; }; };