<!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=utf-8" />

   <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="../js/jquery-1.8.3.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. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  2. div 遮罩层 弹窗

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

  3. jQuery弹出遮罩层效果完整示例

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

  4. Jquery超简单遮罩层实现代码

    看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...

  5. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

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

  6. JS+CSS简单实现DIV遮罩层显示隐藏

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

  7. 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  8. DIV遮罩层传值

    今天费了很大的劲儿才搞定!下面贴出代码和总结: 1.首先是前台代码: <%@ Page Title="" Language="C#" MasterPage ...

  9. Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

随机推荐

  1. ucenter 整合外部网站，实现登录等操作

    最近公司网站要出手机版,由于与论坛要有互通,实现会员的共享,由于对discuz不熟悉,起先考虑的是直接读取discuz的用户表,然后进行判断等操作,发现过于复杂,而且安全也不好. 前一段时间进行过论坛 ...

  2. csv文件批量导入数据到sqlite。

    csv文件批量导入数据到sqlite. 代码: f = web.input(bs_switch = {})  # bs_switch 为from表单file字段的namedata =[i.split( ...

  3. httpd的警告

    1. httpd: apr_sockaddr_info_get() failed for serv05 这个是因为httpd.conf文件没有定义ServerName,所以会用hostname来代替, ...

  4. 【知识点】安全存储服务（SSS）目标应用程序类型

    存在若干种类型的目标应用程序.它们分为两大类:单独的目标应用程序和组目标应用程序.目标应用程序的类型与用于映射用户凭据的帐户类型对应.如果每个用户都在目标应用程序中具有一个帐户,则选择单独的类型.如果 ...

  5. 构造方法Constructor

    构造函数的名称与类名相同,没有返回值类型,主要用于在创建对象的时候进行一些初始化操作,如一个类中没有构造方法,java会默认给一个无参的构造方法

  6. Hardmard 变换

    阿达马(Hadamard)矩阵是由+1和-1元素构成的正交方阵.阿达马变换多被用来计算SATD(一种视频残差信号大小的衡量). 这里介绍三个内容,1. SATD 2. H264中阿达马的应用 3. 阿 ...

  7. Response.Redirect引起的“无法在发送HTTP标头之后进行重定向”

    博客后台切换至i.cnblogs.com之后,在日志中发现大量的“无法在发送HTTP标头之后进行重定向”(Cannot redirect after HTTP headers have been se ...

  8. zend 快捷键

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前 ...

  9. 滚动div的动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. {C#}{GDI+}各种C#，GDI+的资料

    GDI+各种功能: http://www.cnblogs.com/08shiyan/category/253906.html 字体:http://blog.sina.com.cn/s/blog_7c7 ...