js实现弹出窗口、页面变成灰色并不可操作的例子分享
更新时间：2014年05月10日 09:34:51 作者：
为了更好的用户体验，现在网页中好多地方都使用弹出层。比如提示登陆，扫描微信二维码图片，论坛下载弹出扣除积分提醒等。
如果你还不会，可以看看下面这个简单的例子。
<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; /* https://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>
复制代码 代码如下:
<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; /* https://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>
相关文章
Javascript中prototype属性实现给内置对象添加新的方法
这篇文章主要介绍了Javascript中prototype属性实现给内置对象添加新的方法,涉及javascript中prototype属性的使用技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JS学习笔记之数组去重实现方法,结合实例形式总结分析了javascript数组去重的5种常见实现方法及相关操作技巧,需要的朋友可以参考下2019-05-05
本文主要介绍了uniapp集成Echarts，实现地图图表的展示，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
在代码逻辑中更多的是用关联数组的方式。但即使是这样我们也很少使用对象类型作为键值对的键名。2010-07-07
今天小编就为大家分享一篇layui 监听表格复选框选中值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了JavaScript编写实现飞机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了微信小程序使用radio显示单选项功能,涉及针对radio组件事件响应相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
言归正传：性能差异较大的机器运行结果会RT 出现大的差异,为了保险起见。还是推荐使用Array 来进行字符串拼接操作2012-05-05
javascript的propertyIsEnumerable()方法使用介绍
propertyIsEnumerable()是用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回false，下面为大家介绍下其具体的使用2014-04-04
这篇文章主要为大家详细介绍了Bootstrap BootstrapDialog使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最新评论