基于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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
js动态切换图片的方法
Jan 20 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
js实现消息滚动效果
Jan 18 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
AngularJS实现多级下拉框
Mar 25 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 编写大型网站问题集
2010/05/07 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
koa-router源码学习小结
2018/09/07 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python爬虫中多线程的使用详解
2019/09/23 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
六十大寿答谢词
2014/01/12 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
工作鉴定评语
2014/05/04 职场文书
导师推荐信范文
2014/05/09 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
聘用合同范本
2015/09/21 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers