济宁小程序开发哪家好_基于JS完成弹出一个隐藏

2021-01-12 16:25

基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑       这篇文章主要介绍了基于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页面变成灰色并且不可被编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




扫描二维码分享到微信

在线咨询
联系电话

020-66889888