<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>遮罩层的实现</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="clickshow">
<input type="button" value="点我显示" id="show"/>
</div>
<div id="bg">
</div>
<div id="content">
<input type="button" value="关闭" id="close" />
<div id="form">
你确定要删除吗?<br />
<font style="center;">
<input type="button" value="确定" /> <input type="button" value="取消" />
</font>
</div>
</div>
</body>
<style type="text/css">
#bg{
display:none;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
background:#000;
opacity: 0.5;
}
#content{
display:none;
position: absolute;
top: 25%;
left: 25%;
width: 39%;
height: 22%;
z-index:2;
border:8px solid black;
background:white;
}
#close{
float:right;
}
#form{
padding-top:10px;
}
</style>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$(document).on('click','#clickshow',function()
{
$('#bg').show()
$('#content').show()
})
$(document).on('click','#close',function()
{
$('#bg').hide()
$('#content').hide()
})
})
</script>
jquery实现遮罩层
最新推荐文章于 2020-06-21 10:37:57 发布