弹出窗口后，后面的层不可操作

最新推荐文章于 2024-07-05 20:20:47 发布

LLLiiv

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量1.1w

点赞数 2

分类专栏： js 文章标签： js html 模态框效果

本文链接：https://blog.csdn.net/llllvvv/article/details/79926656

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html> 
<head> 
	<meta charset="UTF-8">
	<title>弹出窗口后，后面的层不可操作</title> 
	<script src="js/jquery.min.js"></script> 
<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> 
   #hidebg { position:absolute;left:0px;top:0px; 
      background-color:#000; 
      width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/    
      height: 100%;
      filter:alpha(opacity=60);  /*设置透明度为60%*/ 
      opacity:0.6;  /*非IE浏览器下设置透明度为60%*/ 
      display:none;
      z-Index:2;} 
   #hidebox { text-align: right;position:absolute;width:400px;height:300px;top:200px;left:30%;border-radius: 5px;background-color:#fff;display:none;z-Index:3;padding: 10px;} 
   #content { text-align: center;cursor:pointer;z-Index:1;} 
</style> 
</head> 
<body>
	<div id="hidebg"></div>
	<div id="hidebox"><span onClick="hide();" style="cursor:pointer;">关闭</span></div>
	<div id="content" onClick="show();">点击打开</div>
</body>
</html>

LLLiiv

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
弹出窗口后，后面的层不可操作

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹出窗口后，后面的层不可操作&lt;/title&gt; &lt;script src="js/jquery.min.js"&gt;&lt;/script
复制链接

扫一扫