(转)简单的js弹出窗口效果

JS最简单的弹出窗口效果

 

 

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS最简单的弹出窗口效果http://www.ok22.org</title>  
<style type="text/css">  
html,body{font-size:12px;margin:0px;height:100%;}  
#BOX_overlay {background:#666;left:0;position:absolute;top:0;z-index:100;}/**遮罩层的样式**/  
#layer_box {background:#fff;border:3px solid #000;position:absolute;display:none;z-index:999;width:600px;} /**弹出窗口的样式**/  
.box_title {background:#FFF;border-bottom:1px solid #DDD;margin:10px 10px 0;padding:0 0 5px 20px;} /**关闭栏目**/  
.box_title span {font-size:14px;font-weight:bold;}  
.box_title a {color:#000;position:absolute;right:10px;top:10px;}  
.box_content{padding:10px;margin:10px;}  
</style>  
<script>  
function BOX_show(e,a)//显示  
{  
    if (document.getElementById(e) == null) {  
        return;  
    }  
      
    //if (!a) {  
    //   var selects = document.getElementsByTagName("select");  
    //    for (i = 0; i < selects.length; i++) {  
    //        selects[i].style.visibility = "hidden";  
    //    }  
    //}  
  
    BOX_layout(e);  
    window.onresize = function() { BOX_layout(e); } //改变窗体重新调整位置  
    window.onscroll = function() { BOX_layout(e); } //滚动窗体重新调整位置  
    document.onkeyup = function(event) {  
        var evt = window.event || event;  
        var code = evt.keyCode ? evt.keyCode : evt.which;  
        //alert(code);  
  
        if (code == 27) {  
            BOX_remove(e);  
        }  
    }  
}  
function BOX_remove(e)//移除  
{  
    window.onscroll = null;  
    window.onresize = null;  
    document.getElementById("BOX_overlay").style.display = "none";  
    document.getElementById(e).style.display = "none";  
  
    //var selects = document.getElementsByTagName("select");  
    //for (i = 0; i < selects.length; i++) {  
    //    selects[i].style.visibility = "visible";  
    //}  
}  
  
function BOX_layout(e)//调整位置  
{  
    var a = document.getElementById(e);  
  
    if (document.getElementById("BOX_overlay") == null)//判断是否新建遮掩层  
    {  
  
        var overlay = document.createElement("div");  
        overlay.setAttribute("id", "BOX_overlay");  
          
  
        //overlay.onclick=function(){BOX_remove(e);};  
        //a.parentNode.appendChild(overlay);  
        document.body.appendChild(overlay);  
    }  
    document.getElementById("BOX_overlay").style.cssText="filter:alpha(opacity=0);-moz-opacity:0;opacity:0;"  
    showBackground(document.getElementById("BOX_overlay"),50)  
    document.getElementById("BOX_overlay").ondblclick = function() { BOX_remove(e); };  
    //取客户端左上坐标，宽，高  
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);  
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);  
  
    var clientWidth;  
    if (window.innerWidth) {  
        clientWidth = window.innerWidth;  
        //clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));  
    }  
    else {  
        clientWidth = document.documentElement.clientWidth;  
    }  
  
    var clientHeight;  
    if (window.innerHeight) {  
        clientHeight = window.innerHeight;  
        //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));  
    }  
    else {  
        clientHeight = document.documentElement.clientHeight;  
    }  
  
    var bo = document.getElementById("BOX_overlay");  
    bo.style.left = scrollLeft + "px";  
    bo.style.top = scrollTop + "px";  
    bo.style.width ="100%";  
    bo.style.height = clientHeight + "px";  
    bo.style.display ="";  
  
    //Popup窗口定位  
    a.style.display = "block"  
    a.style.left = scrollLeft + ((clientWidth - a.offsetWidth) / 2) + "px";  
    a.style.top = scrollTop + ((clientHeight - a.offsetHeight) / 2) + "px";  
}  
function showBackground(obj,endInt)  
{  
    var isIe=(document.all)?true:false;  
    if(isIe)  
    {  
        obj.filters.alpha.opacity+=2;  
        if(obj.filters.alpha.opacity<endInt)  
        {  
            setTimeout(function(){showBackground(obj,endInt)},5);  
            //alert(obj.filters.alpha.opacity);  
        }  
    }else  
    {  
        var al=parseFloat(obj.style.opacity);al+=0.01;  
        obj.style.opacity=al;  
    if(al<(endInt/100))  
    {setTimeout(function(){showBackground(obj,endInt)},5);}  
    }  
}  
</script>  
</head>  
  
<body>  
<a href="javascript:BOX_show('layer_box');">点击弹出窗口</a>  
<div id="layer_box">  
    <div class="box_title"><span>弹出窗口标题</span><a onclick="BOX_remove('layer_box')" href="javascript:void(0)">关闭</a></div>  
    <div class="box_content">弹出窗口内容</div>  
</div>  
</body>  
</html>

出处:http://www.ok22.org/art_detail.aspx?id=189

弹出窗口标题关闭
弹出窗口内容
posted @ 2012-11-20 12:30  为乐而来  阅读(382)  评论(0)  编辑  收藏  举报