JS统制按钮弹出DIV压暗背景 _JavaScript

JS控制按钮弹出DIV压暗背景
<!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控制按钮弹出DIV压暗背景</title>
<style type="text/css">
body,div,a,h2,p{ padding:0; margin:0; font-size:14px; font-family:verdana;}
h2{ background:#222; border: 1px solid #777; border-bottom:1px solid #ccc; height:26px; line-height:26px; padding:0 9px; width: 500px; color:#cfcfcf; font-weight: normal; }
a { color:#eee; width:30px; margin:50px auto; display:block; border: 1px solid #555; text-decoration: none; background: #222; font-size: 12px; padding: 5px 10px; text-align: center; }
#dark_bg{ background:#111; filter:alpha(opacity=70); opacity:0.70; }
#new_dialogue{ margin:-250px 0 0 -250px; position:absolute; top:50%; left:50%; }
#close{ cursor:pointer; font: 14px Geneva, Arial, Tahoma; top: 2px; right: 9px; font-weight: bold; padding: 3px; background: #444; float: right; margin-top: 2px; }
/*
@media all and (min-width: 0px){
#close{ position: static; }父元素用了绝对定位,子元素用相对定位,这个子元素的子元素又用绝对定位在opera下无效
}
*/
#content{ padding:10px; width:500px; height:500px; background:#fff; }
</style>
<script type="text/javascript">
//生成背景
function create_bg(){
        //建立一个div的节点
        bg = document.createElement("div");
        bg.id = "dark_bg";
        with(bg.style){
                position = "absolute";
                top = "0";
                left = "0";
                width = document.documentElement.scrollWidth + "px";
                if(document.documentElement.scrollHeight<document.documentElement.clientHeight){
                        height = document.documentElement.clientHeight + "px";
                }else{
                        height = document.documentElement.scrollHeight + "px";
                }
                
        }
        //打开对话框后禁用浏览器的滚动条
        document.documentElement.style.overflow = "hidden";
        document.body.style.overflow = "hidden";
        //把这个节点附加到body上
        document.body.appendChild(bg);
}

//当窗口改变时重建dark_bg的大小,即铺满窗口
window.onresize = function(){
        bg.style.width = document.documentElement.scrollWidth + "px";
        if(document.documentElement.scrollHeight<document.documentElement.clientHeight){
                bg.style.height = document.documentElement.clientHeight + "px";
        }else{
                bg.style.height = document.documentElement.scrollHeight + "px";
        }
}

//生成对话框
function show(){
        create_bg();
        var visual = document.createElement("div");
        visual.id = "new_dialogue";
        var html = "";
        html = '<h2><span id="close" onclick="show_close()">x</span>标题1</h2>';
        html += '<div id="content">内容1</div>';
        visual.innerHTML = html;
        document.body.appendChild(visual);
}
//生成对话框
function as(){
        create_bg();
        var visual = document.createElement("div");
        visual.id = "new_dialogue";
        var html = "";
        html = '<h2><span id="close" onclick="show_close()">x</span>标题2</h2>';
        html += '<div id="content">内容2</div>';
        visual.innerHTML = html;
        document.body.appendChild(visual);
}
//去掉刚才建立的节点
function show_close(){
        var new_dialogue = document.getElementById("new_dialogue");
        var dark_bg = document.getElementById("dark_bg");
        new_dialogue.parentNode.removeChild(new_dialogue);
        dark_bg.parentNode.removeChild(dark_bg);
}
</script>
</head>

<body>
<a href="#" onclick="show()">按钮1</a>
<a href="#" onclick="as()">按钮2</a>
</body>
</html>