js+css控制弹出小窗口之后，后整个页面背景图变色，并且不可操作，点击确定，页面跳转。。。

最新推荐文章于 2022-07-30 17:49:34 发布

hpugym

最新推荐文章于 2022-07-30 17:49:34 发布

阅读量4.5k

点赞数 1

分类专栏： Web开发

本文链接：https://blog.csdn.net/hpugym/article/details/49779785

版权

Web开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<html> 
<head> 
<title>弹出一个窗口后，后面的层不可操作 ，点击确定之后跳转新的页面</title> 
<script> 
function show()  //显示隐藏层和弹出层 
{ 
   var hideobj=document.getElementById("hidebg"); 
   hidebg.style.display="block";  //显示隐藏层 
   hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度   px是后缀
   document.getElementById("hidebox").style.display="block";  //显示弹出层 
} 
function hide()  //去除隐藏层和弹出层 
{ 
   document.getElementById("hidebg").style.display="none"; 
   document.getElementById("hidebox").style.display="none"; 
} 
function open_()
{
	window.location.href="http://www.hpu.edu.cn";
}
</script> 
<style> 
   body { margin:0px;padding:0px;text-align: center;} 
   #hidebg { position:absolute;left:0px;top:0px;
      background-color:#002; 
      width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/ 
      filter:alpha(opacity=30);  /*设置透明度为60%*/ 
      opacity:0.3;  /*非IE浏览器下设置透明度为60%*/ 
      display:none; /* http://www.jb51.net */ 
      z-Index:2;} 
   #hidebox { position:absolute;border:1px solid #99CCFF;width:400px;height:150px;top:200px;left:30%;background-color:#fff;display:none;z-Index:3;} 
   #content { text-align:center;cursor:pointer;z-Index:1; } 
   .button1{float: right;cursor:pointer;}
   .button1:hover{background-color:#c75050;color:white;}
   .button2{background-color:#6a9f3f; font-size:18px;}
   #hidebox .p1{background-color:#336699;width:100%;border:1px solid silver;float:left;margin-top:0px;}
   #hidebox
</style> 
</head> 
<body> 
<div id="hidebg"></div> 
<div id="hidebox"><p class="p1"><input class="button1" type="button" value="×"  onClick="hide();"></p>
      <p>是否继续？</p>
      <input class="button2" type="button" value="取消" onClick="hide()">  
      <input class="button2" type="button" value="确定" onClick="open_()">
</div> 
<div id="content" onClick="show();">点击试试</div> 
</body> 
</html>

hpugym

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js+css控制弹出小窗口之后，后整个页面背景图变色，并且不可操作，点击确定，页面跳转。。。

弹出一个窗口后，后面的层不可操作，点击确定之后跳转新的页面 function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style.display="block"; //显示隐藏层 hidebg.style.height=document.body.cl
复制链接

扫一扫