欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

javascript弹出层锁定弹出层以外不可点击

       弹出层     2016-02-16     eycms     45     0    

<html>


<head>


<title>javascript弹出层锁定弹出层以外不可点击</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; /* 


      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></td>

 </tr>

</table>


--结束END--

本文链接: http://www.83703228.cn/resources/popup/1135.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端