脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → div 灰色不可点击

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

 更新时间：2016年12月14日 09:38:27   作者：成兮  
这篇文章主要介绍了基于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+CSS实现TreeMenu二级树形菜单完整实例

    JS+CSS实现TreeMenu二级树形菜单完整实例

    这篇文章主要介绍了JS+CSS实现TreeMenu二级树形菜单,以完整实例形式较为详细的分析了JS二级树形菜单的节点元素操作技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • .html文件防止script脚本缓存的三种方法

    .html文件防止script脚本缓存的三种方法

    现在有这样一个问题,由于一些原因,我们经常需要修改gTool的代码然后上传更新cdn,但是用户通过 html 文件访问的 gTool 链接实际上还是缓存的,所以现在问题就是如何禁止缓存,文中给大家介绍了三个方法供大家参考,需要的朋友可以参考下
    2024-01-01
  • JS关闭窗口时产生的事件及用法示例

    JS关闭窗口时产生的事件及用法示例

    这篇文章主要介绍了JS关闭窗口时产生的事件及用法,结合关闭窗口时提交评论的实例分析了javascript事件触发机制及遮罩层实现技巧,需要的朋友可以参考下
    2016-08-08
  • 基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    在jQuery Form插件可以让你很容易的使用AJAX提交Form表单，主要方法ajaxForm和ajaxSubmit负责收集表单元素的信息,管理提交进程。这两种方法都是可配置的,让你完全控制Form提交，本篇文章介绍基于jQuery通过jQuery.form.js插件使用ajax提交form表单，需要的朋友可以参考下
    2015-08-08
  • JS 控件事件小结

    JS 控件事件小结

    事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的
    2012-10-10
  • 利用JS屏蔽页面中的Enter按键提交表单的方法

    利用JS屏蔽页面中的Enter按键提交表单的方法

    下面小编就为大家带来一篇利用JS屏蔽页面中的Enter按键提交表单的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JavaScript中EventLoop介绍

    JavaScript中EventLoop介绍

    本篇文章给大家详细介绍了JavaScript中EventLoop的相关知识，有这方面需要的朋友参考学习下。
    2018-01-01
  • JavaScript 事件流、事件处理程序及事件对象总结

    JavaScript 事件流、事件处理程序及事件对象总结

    JS与HTML之间的交互通过事件实现,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,可以使用(或处理程序)来预定事件,以便事件发生时执行相应的代码,本文将介绍JS事件相关的基础知识,
    2017-04-04
  • vue iView 上传组件之手动上传功能

    vue iView 上传组件之手动上传功能

    iView 主要服务于 PC 界面的中后台业务，是一套高质量的开源 UI 组件库。这篇文章主要介绍了iView 上传组件之手动上传功能,需要的朋友可以参考下
    2018-03-03
  • javascript读取xml

    javascript读取xml

    javascript读取xml...
    2006-11-11

最新评论