方法一:
转载地址
<html>
<head>
<title>弹出一个窗口后,后面的层不可操作</title>
<script>
function show() //显示隐藏层和弹出层
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //显示隐藏层
hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度
document.getElementById("hidebox").style.display="block"; //显示弹出层
}
function hide() //去除隐藏层和弹出层
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
</script>
<style>
body { margin:0px;padding:0px;text-align: center;}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
filter:alpha(opacity=60); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
display:none; /* http://www.jb51.net */
z-Index:2;}
#hidebox {
position:absolute;width:400px;height:300px;
top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
#content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">点击关闭</div>
<div id="content" onClick="show();">点击试试</div>
</body>
</html>
实现效果:
点击前:
点击后:
方法二:
利用amazeui框架
官方地址
使用时需要导入amazeui相关文件
<div id="labelInfo" class="am-modal am-modal-no-btn" tabindex="-1">
<div class="am-modal-dialog">
<div class="am-modal-hd">
信息
<a href="javascript: void(0)" style="font-size:30px;color:red"
class="am-close am-close-spin" data-am-modal-close="">×</a>
</div>
<div class="am-modal-bd">
<div class="widget-body am-fr" style="overflow-y:auto;height:500px">
<table style="table-layout: fixed;width:100%;"
class="am-table am-table-bordered am-table-striped am-table-hover">
<thead><tr>
<th>选择</th>
<th>编码</th>
<th>图片</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
实现效果如下:
点击前:
点击后:
目前方法二,弹出窗口后,点击灰色区域,弹框会自动消失,方法一不会。
若需求为点击灰色区域,弹框不消失,需要设置属性:closeViaDimmer
$("#labelInfo").modal({
//点击遮罩层,不关闭模态框
closeViaDimmer:false
});
//属性设置后,打开模态框
$("#labelInfo").modal('open');