教程集 > 脚本编程 > javascript > 正文 javascript弹出层锁定弹出层以外不可点击

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

发布时间：2016-11-10 编辑：jiaochengji.com

教程集为您提供javascript弹出层锁定弹出层以外不可点击等资源，欢迎您收藏本站，我们将为您提供最新的javascript弹出层锁定弹出层以外不可点击资源

为了更好的用户体验，现在网页中好多地方都使用弹出层。比如提示登陆，扫描微信二维码图片，论坛下载弹出扣除积分提醒等。如果你还不会，可以看看下面这个简单的例子

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><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>

点击关闭

点击试试

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript弹出层锁定弹出层以外不可点击
 点击弹出层外区域关闭弹出层jquery特效示例
 Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
 jquery实现点击弹出层效果的简单实例
 jquery 点击按钮弹出层点击空白处隐藏层的实现代码
 jquery 事件冒泡的介绍以及如何阻止事件冒泡
 漂亮的jquery提示效果(仿腾讯弹出层)
jquery win 7透明弹出层效果的简单代码
 超酷可加载asp,php,jsp,.net文件js弹出层代码
 jquery三个关闭弹出层的小示例

上一篇：JavaScript实现页面表格搜索功能下一篇：js 缓冲运动框架

[关闭]

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

最近更新

浏览排行