Javascript教程_一个弹出层背景变暗的效果源码教程_Javascript教程_H5之家

Javascript教程_一个弹出层背景变暗的效果源码教程

复制代码后运行代码请刷新一次运行后的页面就可以看到效果了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dialog</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function(){
     var bheight=document.body.clientHeight;
     $("#lay").click(function(){
  $("#brg").css("display","block");
  $("#showdiv").css("display","block");
  //$("#testdiv").load("test.html");
});
$("#close").click(function(){
     $("#brg").css("display","none");
  $("#showdiv").css("display","none");
  //$("#testdiv").load("");
});
});
</script>
<style type="text/css">
#brg{ width:100%; height:100%; background:#333; position:absolute; top:0; left:0; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; position:absolute; top:0; left:0; display:none;}
#showdiv{ width:100%; height:auto; position:absolute; left:0; top:0; z-index:20; display:none; }
#testdiv{ width:600px; height:400px; margin:0 auto; border:1px solid #4d4d4d; background:#f2f2f2;}
#close{width:200px; height:27px; line-height:27px; font-size:14px; font-weight:bold; border:1px solid #4d4d4d; text-align:center; cursor:pointer; margin:0 auto; background:#333; color:#fff;}
.btn{ margin:20px auto auto 20px; width:200px; height:27px; line-height:27px; font-size:14px; font-weight:bold; border:1px solid #4d4d4d; text-align:center; cursor:pointer;}
</style>
</head>
<body>
<div id="lay" class="btn">点击我弹出一个层哦</div>
<div id="brg"></div>
<div id="showdiv">
<div id="close">你看的不爽就关闭我吧</div>
<div id="testdiv">很简单的谈出层背景变暗效果，欢迎拍砖啊</div>
</div>
</body>
</html>