<%@ 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. python 之post、get与cookie实战

    项目名称:登陆考勤管理系统爬取个人考勤信息并写入excel表格 编写目的: 公司经常要统计员工的考勤信息,而员工每次都要登陆考勤系统,再复制相关信息出来,贴到EXCEL,再转给统计人员,统计人员再挨个 ...

  2. SQL 表 和字符串 互转 (行列互转)

    -- 表转字符串 )) ,,'') --字符串转表 ),)) ,) )) AS BEGIN DECLARE @StartIndex INT --开始查找的位置 DECLARE @FindIndex I ...

  3. Qt 动画框架

    最近一个项目中的需要做动画效果,很自然就想起来用qt animation framework .这个框架真的很强大.支持多个动画组合,线性动画,并行动画等.在此总结一下使用该框架一些需要注意的地方: ...

  4. Silverlight管理系统源代码（SilverlightOAFlame开发框架主要提供二次开发）

    Silverlight OA系统简介 系统功能简介 l 程序界面介绍: 左侧为主菜单,主菜单可以展开和收起,主菜单下面的所有模块都可以在数据库中扩展增加,模块的权限和用户角色挂钩,可以在数据库中创建多 ...

  5. IOS中图片拉伸技巧与方法总结（转载）

    以下内容转载自:http://my.oschina.net/u/2340880/blog/403996 IOS中图片拉伸技巧与方法总结 一.了解几个图像拉伸的函数和方法 1.直接拉伸法 简单暴力,却是 ...

  6. JavaScript插件架构

    1.HTML布局规则 默认情况下,所有的插件都可以通过设置特定的HTML代码和相应的属性来实现.也就是说,在网页加载的时候,JavaScript代码会自动检测这些标记,并自动绑定相应的事件,而无需添加 ...

  7. 【javascript基础】6、new与构造函数

    前言 上篇说创建对象的时候提到了带返回值的构造函数,那里没有和大家说这个问题,今天就和大家一起学习构造函数和new操作符.我也是最近才稍微弄明白点这个构造函数,以前总是忽略一些问题,现在就是想到哪块不 ...

  8. QTdebug时没有调试引擎

    问题描述: 在调试程序时,点击调试按钮,弹出no engine. 问题解决: 到官网下载调试的SDK.https://developer.microsoft.com/zh-cn/windows/dow ...

  9. iOS开发--应用设置及用户默认设置【2、读取应用中的设置】

            在上一节中,我们通过探讨应用的系统设置的基本功能,了解运用bundle捆绑包以及plist文件的基本开发.用户能够使用设置应用来声明他们的偏好设置,那么我们怎样去调用用户所设置的参数呢 ...

  10. 2016-07-15: Window定时器使用

    windows下定时器使用实例 #include <iostream> #include <Windows.h> using namespace std; void Timer ...