JS统制按钮弹出DIV压暗背景
日期：2014-05-16 浏览次数：20418 次
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>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
