jquery实现遮罩层

来源：互联网发布：中国硕士论文数据库编辑：程序博客网时间：2024/04/29 20:48
<!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>
0 0