<%@ 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. NOIP2015 跳石头

    一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N块岩石(不含起点和终点的岩石). ...

  2. 论文笔记之：Speed Up Tracking by Ignoring Features

    Speed Up Tracking by Ignoring Features CVPR 2014 Abstract:本文提出一种特征选择的算法,来实现用最"精简"的特征以进行目标跟 ...

  3. Sql日期时间格式转换（转）

    原文出自:http://www.cnblogs.com/Gavinzhao/archive/2009/11/10/1599690.html sql server2000中使用convert来取得dat ...

  4. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  5. STM32F1和STM32F4 区别

    STM32F4相对于STM32F1的改进不只一点点,为了便于初学者了解,我们比对相关资料将改进点进行了汇总. STM32F1和STM32F4 区别   (安富莱整理)u  F1采用Crotex M3内 ...

  6. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  7. 3、Linux 获取帮助的方法-关机命令-7个系统启动级别

    1.获取帮助的方法: (1).命令 -h 或--help (2).man man 命令  --->/user 查看user选项 /选项 ---->n 查看下一项 2.关机命令 (1).sh ...

  8. 随笔 高质量 C++/C 编程指南

    内存分配方式有三种:) 从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量, static 变量.) 在栈上创建.在执行函数时,函数内局部变量的存储 ...

  9. Spring @Service生成bean名称的规则

    今天碰到一个问题,写了一个@Service的bean,类名大致为:BKYInfoServcie.java dubbo export服务的配置: <dubbo:service interface= ...

  10. [ActionScript 3.0] AS3.0将图像的Alpha通道转换为黑白图像（复制通道方式）

    import flash.display.BitmapData; /** * 将图像的Alpha通道转换为黑白图像 */ var p:Point = new Point(0,0); var bmpd: ...