<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css" > /* LoginUI*/ .hidden { display: none;} .popup{position: absolute; 450px; z-index: 60000;} .container{ border: 5px solid #333; 445px;background: white;height:400px;} </style > <script type="text/javascript" > var LoginUI = !!window.LoginUI || {}; $ = function(id){return document.getElementById(id)} //获得宽度 LoginUI.getViewportWidth = function () { var width = 0; if (document.documentElement && document.documentElement.clientWidth) { width = document.documentElement.clientWidth; } else if (document.body && document.body.clientWidth) { width = document.body.clientWidth; } else if (window.innerWidth) { width = window.innerWidth - 18; } return width; } //获得高度 LoginUI.getViewportHeight = function () { var height = 0; if (window.innerHeight) { height = window.innerHeight - 18; } else if (document.documentElement && document.documentElement.clientHeight) { height = document.documentElement.clientHeight; } else if (document.body && document.body.clientHeight) { height = document.body.clientHeight; } return height; } LoginUI.getViewportScrollY = function () { var scrollY = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollY = document.documentElement.scrollTop; } else if (document.body && document.body.scrollTop) { scrollY = document.body.scrollTop; } else if (window.pageYOffset) { scrollY = window.pageYOffset; } else if (window.scrollY) { scrollY = window.scrollY; } return scrollY; } //遮盖层长度、宽度设置 LoginUI.centerDiv = function (div) { var top = ((LoginUI.getViewportHeight() - div.offsetHeight) / 2); if (top < 0) top = 10; div.style.left = ((LoginUI.getViewportWidth() - div.offsetWidth) / 2) + "px"; div.style.top = top + LoginUI.getViewportScrollY() + "px"; } //遮盖层显示 LoginUI.showLogin = function() { $("Login").className = "popup container"; $("Login").style.display="block"; LoginUI.centerDiv($("Login")); $("blockUI").style.display="block"; alert(document.body.clientHeight); $("blockUI").style.height = window.document.body.clientHeight + "px"; //$("blockUI").style.height = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() + "px"; } //遮盖层隐藏 LoginUI.hideLogin = function () { $("blockUI").style.display = "none"; $("Login").style.display = "none"; } </script> </head> <body> <div style="height:1000px"> <div id="blockUI" style="display: none; background-color: black; 100%; height: 1000px; position: absolute; left: 0px; top: 0px; z-index: 50000; -moz-opacity: 0.5; opacity: 0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';filter:alpha(opacity=50);" onclick="return false" onmousedown="return false" onmousemove="return false" onmouseup="return false" ondblclick="return false" > </div > <div id="Login" class="popup container hidden" ><a href="#" onclick="LoginUI.hideLogin()" margin-top: -33px; margin-right: 10px;" >[关闭]</a ></div > <input type="button" onclick="LoginUI.showLogin()" value="Login In" / > </div> </body> </html>