标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="background.js"></script> -->
<!-- jquery 部分 -->
<script type="text/javascript">
$(function()
{
$("#but").click(function(){
// 获取当前页面的高度
var height=$(‘body‘).css(‘height‘);
//append遮罩层元素
$(‘body‘).append
("<div id=background style=‘height:"+height+"‘;></div>")
//显示弹出框
$("#hide").slideDown("slow");
})
$("#close").click(function(){
//关闭弹出框
$(this).closest(‘div‘).hide();
$("#background").remove();
})
$(".text").click(function(){
alert($(this).attr(‘id‘));
})
})
</script>
<!-- css部分 -->
<style type="text/css">
#background{
left: 0px;
top:0px;
width:100%;
opacity: 0.7;
z-index: 8;
background:gray;
position:absolute;
}
#hide p{
color:#ffffff;
}
</style>
<!-- html 部分 -->
</head>
<body style="magin:0px 0px ;padding:0px 0px;height:700px">
<div id="test" style="width:100%; height:700px;background:#dddddd">
<button id="but">按钮</button>
<button class="text" id="t1">测试按钮1</button>
<button class="text" id="t2">测试按钮2</button>
<button class="text" id="t3">测试按钮3</button>
<p>类容很丰富的样子 类容很丰富的样子</p>
<p>类容很丰富的样子 类容很丰富的样子</p>
<p>类容很丰富的样子 类容很丰富的样子</p>
<p>类容很丰富的样子 类容很丰富的样子</p>
<p>类容很丰富的样子 类容很丰富的样子</p>
<p>类容很丰富的样子 类容很丰富的样子</p>
<div id="hide" style="width:300px;height:200px;top:100px;left:200px;position:absolute;background:gray;z-index:9;display:none;box-shadow: 50px 50px 25px #888888;border:5px solid orange
">
<button id="close"style="float:right">关闭</button>
<p>类容依然很丰富 类容依然很丰富</p>
<p>类容依然很丰富 类容依然很丰富</p>
<p>类容依然很丰富 类容依然很丰富</p>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/taohome/p/5026554.html
