基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
更新时间：2016年12月14日 09:38:27 作者：成兮
这篇文章主要介绍了基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
当需要实现如下图操作，点击服务评分，出现一个服务评分窗口用来填入相关表单信息
可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接，这是不对的，因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面，不能被点击，如下:
/* 定义一个div用于覆盖整个页面，这个div的z-index大于body，小于服务评分div */
#temp{
background-color: #000;
opacity: 0.3;
width: 100%;
height: 100%;
z-index: 2;
visibility: hidden;
}
/* 评分div，其z-index最大(当显示时) */
#mark{
background-color: rgb(255,255,255);
width: 400px;
height: 250px;
z-index: 3;
visibility: hidden;
}
/* 包含了服务评分、购物车等的div */
#main{
background-color: rgb(255,255,255);
width: 100%;
height: 100%;
z-index: 1;
}
<div id="temp"></div>
<div id="mark"></div>
<div id="main"></div>
<a id="link"><i>点击我进行层叠</a>
<script>
window.onload = function() {
document.getElementById("link").onclick = function(){
document.getElementById("temp").style.visibility = "visible";
document.getElementById("mark").style.visibility = "visible";
}
}
</script>
效果图如下:
以上所述是小编给大家介绍的基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法2022-10-10
这篇文章主要介绍了javascript弹出窗口实现代码，非常人性化的设计，点击页面可以弹出窗口，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了bootstrap fileinput 上传插件基础使用，重点是把界面做得更加友好，更好的增加用户体验。对bootstrap fileinput知识感兴趣的朋友通过本文一起学习吧2017-02-02
这篇文章主要介绍了Js参数RSA加密传输之jsencrypt.js的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
bootstrap开发标签页时，标签页显示正常，但点击时候对应内容区域没有变化。接下来通过本文给大家分享BootStrap 页签切换失效的解决方法，感兴趣的朋友一起看看吧2017-08-08
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
遇到的本地图片预览的需求,IE6下可以直接从file的value获取图片路径来显示预览,IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览，至于FireFox祥看本文吧，希望可以帮助到你2013-03-03
根据文本绑定text、根据值绑定value，下面有个不错的示例，大家可以看看2014-09-09
下面小编就为大家带来一篇基于Bootstrap框架菜鸟入门教程(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论