基于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与flash交互通信基础教程
Aug 07 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
纯php生成随机密码
2015/10/30 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
python实现TCP文件传输
2020/03/20 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
化学相关工作求职信
2013/10/02 职场文书
捐赠仪式主持词
2014/03/19 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers