JS 弹出窗口,底层画面置灰且不能操作

5 篇文章 0 订阅

方法一:
转载地址

<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');
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值