基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑


Posted in Javascript onDecember 14, 2016

当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息

基于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页面变成灰色并且不可被编辑

以上所述是小编给大家介绍的基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 #Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 #Javascript
深入理解jquery中的each用法
Dec 14 #Javascript
Bootstrap基本模板的使用和理解1
Dec 14 #Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 #Javascript
jQuery的extend方法【三种】
Dec 14 #Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 #Javascript
You might like
PHP 中的批处理的实现
2007/06/14 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
浅谈Python的异常处理
2016/06/19 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
Python接口开发实现步骤详解
2020/04/26 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
春节晚会主持词
2014/03/24 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server