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> ?