基于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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
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的人气开发框架Laravel
2015/10/15 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python基于Selenium的web自动化框架
2019/07/14 Python
如何获取Python简单for循环索引
2019/11/21 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
毕业实习评语
2014/02/10 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
军训自我鉴定100字
2014/02/13 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
食品业务员岗位职责
2014/03/18 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL