求弹出div并且可以关闭的带样式的源码，javascript不要jq？？？急！急！急！急！急！

如题

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /* LoginUI*/
    .hidden { display: none;}
    .popup{position: absolute;width: 450px; z-index: 60000;}
    .container{ border: 5px solid #333;width: 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";
    $("blockUI").style.height = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() + "px";
    }LoginUI.hideLogin = function()
    {
    $("blockUI").style.display="none";
    $("Login").style.display="none";
    }
    </script>
    </head>
    <body>
    <div id="blockUI" style="display: none; background-color: black; width: 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">
    &nbsp;
    </div>
    <div id="Login" class="popup container hidden">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <br/><br/><br/>
    <input type=button onclick='LoginUI.hideLogin()' value="Close" />
    </div>
    <input type="button" onclick="LoginUI.showLogin()" value="Login In" />
    </body>
    </html>