<%@ 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. 记录几款不错的chrome主题

    虽然不是一个主题控,但是浏览器无疑是每天使用最多的工具.而在MAC底下,大多数程序边框都是银灰色的,窗口多了就难以有效区分. 所以精挑细选了几款,要求是标签要容易辨识,简洁而不花哨. 不推荐太固定的风 ...

  2. IncDec Sequence

    题目链接 http://www.lydsy.com/JudgeOnline/problem.php?id=3043[题目描述]给定一个长度为 n 的数列{a1,a2...an},每次可以选择一个区间[ ...

  3. Matlab数字信号处理

    产生方波 clear t=0:0.01:10; subplot(4,1,1) f1=square(t);                       %  产生周期为2pi的方波信号 plot(t,f ...

  4. JSBinding+SharpKit / JavaScript调试

    注意: 1 Firefox 的版本用41 2 我发现调试很难用的,现在我都用打印 步骤参考图:

  5. vb6 关闭显示器

    Option Explicit Private Const WM_SYSCOMMAND As Long = &H112 Private Const SC_MONITORPOWER As Lon ...

  6. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  7. [zz] be similar with和be similar to的区别

    http://wenda.tianya.cn/question/4cb13da080ee34c9 be similar to后边既可以加物主代词又可以加人,即:be similar to sth/sb ...

  8. Spring MVC中使用 Swagger2 构建Restful API

    1.Spring MVC配置文件中的配置 [java] view plain copy <!-- 设置使用注解的类所在的jar包,只加载controller类 --> <contex ...

  9. windows下用一台机器配置分布式redis（主从服务器）

    目录1.Replication的工作原理2.如何配置Redis主从复制 1.Replication的工作原理在Slave启动并连接到Master之后,它将主动发送一条SYNC命令.此后Master将启 ...

  10. 【uTenux实验】互斥体

    互斥体,维基百科中交互斥锁.其定义是这样的:互斥锁(英语:英语:Mutual exclusion,缩写 Mutex)是一种用于多线程编程中,防止两条线程同时对同一公共资源(比如全局变量)进行读写的机制 ...