<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
  <title>Jquery遮罩层</title>
  
  <style
type="text/css">      
      #BgDiv{background-color:#e3e3e3;
position:absolute; z-index:99; left:0; top:0; display:none; width:100%;
height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
   
  
      #DialogDiv{position:absolute;width:400px; left:50%; top:50%;
margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px
#8FA4F5 solid; padding:1px;}
      #DialogDiv h2{ height:25px;
font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px;
line-height:25px;}
      #DialogDiv h2 a{position:absolute; right:5px;
font-size:12px; color:#000000}
      #DialogDiv .form{padding:10px;}
   
  
      #DialogDiv2{position:absolute;width:400px; left:50%; top:50%;
margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px
#8FA4F5 solid; padding:1px;}
      #DialogDiv2 h2{ height:25px;
font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px;
line-height:25px;}
      #DialogDiv2 h2 a{position:absolute; right:5px;
font-size:12px; color:#000000}
      #DialogDiv2 .form{padding:10px;}
   
  
      #DialogDiv3{position:absolute;width:400px; left:50%; top:50%;
margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px
#8FA4F5 solid; padding:1px;}
      #DialogDiv3 h2{ height:25px;
font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px;
line-height:25px;}
      #DialogDiv3 h2 a{position:absolute; right:5px;
font-size:12px; color:#000000}
      #DialogDiv3
.form{padding:10px;}
  </style>
  
  <script
language="javascript" type="text/javascript"
src="jquery-1.4.2.min.js"></script>
  <script
language="javascript" type="text/javascript">
   function
ShowDIV(thisObjID) {
          $("#BgDiv").css({ display: "block", height:
$(document).height() });
          var yscroll =
document.documentElement.scrollTop;
          $("#" + thisObjID ).css("top",
"100px");
          $("#" + thisObjID ).css("display",
"block");
    document.documentElement.scrollTop = 0;
      }

function closeDiv(thisObjID) {
          $("#BgDiv").css("display",
"none");
          $("#" + thisObjID).css("display", "none");
     
}
 </script>
  
 </head>
 
 <body>
  <div
id="BgDiv"></div>
  
  <!--遮罩层显示的DIV1-->
  <div
id="DialogDiv" style="display:none">
    <h2>弹出层<a href="#"
id="btnClose"
onclick="closeDiv('DialogDiv')">关闭</a></h2>
   <div
class="form">我是弹出对话框111111！！</div>
  </div>
  
  <!--遮罩层显示的DIV2-->
  <div
id="DialogDiv2" style="display:none">
    <h2>弹出层<a href="#"
id="btnClose2"
onclick="closeDiv('DialogDiv2')">关闭</a></h2>
   <div
class="form">我是弹出对话框2222！！</div>
  </div>
  
  <!--遮罩层显示的DIV3-->
  <div
id="DialogDiv3" style="display:none">
    <h2>弹出层<a href="#"
id="btnClose3"
onclick="closeDiv('DialogDiv3')">关闭</a></h2>
   <div
class="form">我是弹出对话框3333333！！</div>
  </div> 
  
  <p>
   <input
value="弹出遮罩层1" type="button" id="btnShow1" onclick="ShowDIV('DialogDiv')"
/>
   <input value="弹出遮罩层2" type="button" id="btnShow2" 
onclick="ShowDIV('DialogDiv2')" />
   <input value="弹出遮罩层3"
type="button" id="btnShow3"  onclick="ShowDIV('DialogDiv3')"
/>
  </p>
 </body>
</html>

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作的更多相关文章

  1. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  2. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  3. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  4. 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  5. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  6. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  7. js特效遮罩层（弹出层）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. html 遮罩层以及弹出框的制作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

随机推荐

  1. android之 listview加载性能优化ViewHolder

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  2. unity, 由scriptableObject创建.asset

    由继承自scriptableObject的类X创建.asset文件. 假设类X的定义为: [System.Serializable] public class X : ScriptableObject ...

  3. SQL阻塞原因造成系统多功能无响应的分析解决思路

    最近遇到一个sqlserver项目,月底会出现多个财务相关功能出现不定期操作无响应问题 通过查询SQL阻塞信息,定位到阻塞源头spid.该会话的状态.等待事件及执行的SQL脚本 根据spid查询该会话 ...

  4. SQL总结（一）基本查询

    SQL总结(一)基本查询 SQL查询的事情很简单,但是常常因为很简单的事情而出错.遇到一些比较复杂的查询我们更是忘记了SQL查询的基本语法. 本文希望通过简单的总结,把常用的查询方法予以总结,希望能够 ...

  5. 黄聪：说说JSON和JSONP，也许你会豁然开朗（转）

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  6. ImageLoader介绍2

    Universal Image Loader 是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示.所以,如果你的程序里需要这个功能的话,那么不妨试试它.他本来是 ...

  7. springmvc跳转和重定向

    如果springmvc返回的视图中带有redirect:或者forward:,springmvc会进行特殊处理, redirect:会执行重定向,forward:会执行转发操作! @RequestMa ...

  8. LeetCode 342. Power of Four

    Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...

  9. Linux批量更改文件后缀名

    一.rename解决 1.  Ubuntu系统下 rename 's/\.c/\.h/'  ./* 把当前目录下的后缀名为.c的文件更改为.h的文件 2.  CentOS5.5系统下 rename . ...

  10. 数据结构&算法-双向链表

    1.引言 双向链表原理和单链表差不多,就是操作相对繁琐一些,简单画了几个图,把思想弄清楚就好. 2.正文 这里介绍一下插入和删除的原理,相信这两个操作搞清楚的话,其他操作也没什么问题. 2.1插入节点 ...