<%@ 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. springMvc源码学习之：spring源码总结

    转载自:http://www.cnblogs.com/davidwang456/p/4213652.html spring beans下面有如下源文件包: org.springframework.be ...

  2. knockout 学习实例3 html

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

  3. for xml path(''),root('')

    ,,'') SELECT top 10 ROW_NUMBER()OVER(ORDER BY OperationID) as 'Message/MessageId', OperationID as 'I ...

  4. VC运行库合集2005/2008/2010/2012/2013/2015

    VC运行库合集2005/2008/2010/2012/2013/2015,批处理一键安装(需管理员权限) 链接:http://pan.baidu.com/s/1bpLZoFt 密码:bnk8

  5. xcode 5.0中，新的开发者证书加载方式

    按照先前从网上看到的参考,开通了开发者账号之后,要先在本地生成一个request文件,然后上传苹果开发者网站,然后在官网上生成一个证书.cer文件,拿这个文件在本地生成p12文件,然后就是一堆鸡零狗碎 ...

  6. Editable DataGrid 实现列表新增编辑功能

    今天在开发一个功能时候,需要直接在列表实现新增.编辑等功能.于是查看easyui 相关文档,找到相关解决办法. easyui的datagrid支持可编辑功能.它使用户能够向数据网格中添加一个新行.用户 ...

  7. 解决jsp下载文件，迅雷下载路径不显示文件名称的问题

    如果浏览器安装了迅雷的插件,在jsp页面调用java后台实现文件下载功能时,会自动弹出迅雷下载,迅雷的下载路径会显示.do或者.xhtml之类的,为了解决这个问题,jsp页面修改如下: 写一个< ...

  8. jQuery - 疑惑

    设置内容和属性:http://www.runoob.com/jquery/jquery-dom-set.html

  9. [CF #288-C] Anya and Ghosts (贪心)

    题目链接:http://codeforces.com/contest/508/problem/C 题目大意:给你三个数,m,t,r,代表晚上有m个幽灵,我有无限支蜡烛,每支蜡烛能够亮t秒,房间需要r支 ...

  10. Blackfin DSP(八)：BF533的DMA

    #include <cdefBF533.h> #include <sys\exception.h> #define POLC 0x00004000 #define PORT_C ...