当需要实现如下图操作，点击服务评分，出现一个服务评分窗口用来填入相关表单信息
可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接，这是不对的，因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面，不能被点击，如下:
页面，这个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);
width: 100%;
height: 100%;
z-index: 1;
}
点击我进行层叠
@H_502_11@
window.onload = function() {
document.getElementById("link").onclick = function(){
document.getElementById("temp").style.visibility = "visible";
document.getElementById("mark").style.visibility = "visible";
}
}
效果图如下:
以上所述是小编给大家介绍的基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/43572.html