jquery实现div遮罩层

 <!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遮罩层的更多相关文章

基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
div 遮罩层弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery弹出遮罩层效果完整示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jquery超简单遮罩层实现代码
看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...
JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
在iframe内页面完全加载完后，关闭父页面生成的div遮罩层
遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数此段代码在iframe页面内: <script> ...
DIV遮罩层传值
今天费了很大的劲儿才搞定!下面贴出代码和总结: 1.首先是前台代码: <%@ Page Title="" Language="C#" MasterPage ...
Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

随机推荐

java内存溢出分析（一）
在项目中发现内存占用过高,且一直不会释放,top命令如下图显示可以看到pid为17453的java进程占用27.1%内存,且长时间没有释放. 1.使用命令生成heap日志以供分析 sudo jmap ...
ISO 14229 简介转载
作者:autogeek 原文链接:http://www.cnblogs.com/autogeek/p/4458591.html 前言由于工作中经常用到ISO-14229,因此决定对该协议做个总体介绍 ...
Esfog_UnityShader教程_镜面反射SpecularReflection
系列教程第四篇,本来打算昨天写的,有些小偷懒就今天写了,这一期我们来讨论一下关于镜面反射的基本原理和具体代码.这一篇是承接着上一篇<Esfog_UnityShader教程_漫反射DiffuseR ...
js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽
介绍了那么多运动,這次一套代码实现所有运动 1.html代码和css代码,只是定义一个div <style> div{ width:200px; height:200px; margin: ...
ORCLE数据库导出导入
从一个用户导出用户所有结构数据再导入另一个用户里面 ORACLE导出用户下的数据库 exp 命令用户名/密码服务名文件地址 owner=(用户名)exp COM_HIOSC_OLD/COM_ ...
iOS 原生态扫描二维码、条形码的功能。
1.导入AVFoundatin.framework. 2.新建一个viewController,命名为QRScanViewController,用于扫描的界面. h文件如下,设置代理. #import ...
第一零二天上课 PHP TP框架引入文件路径问题和调用验证码的方式
外部文件引入到视图模板的方式 1,将外部文件放在Public文件夹下,用load标签引入 2,在模板出书写引入代码(方法有很多,只有以下方法不容易出问题) <load h ...
Redis 的Lua Script脚本功能
从 Redis 2.6.0 版本开始,通过内置的 Lua 解释器,可以使用 EVAL 命令对 Lua 脚本进行求值 Redis2.6内置的Lua Script支持,可以在Redis的Server端一次 ...
修改win10打开文件资源管理器
html--第一章基础知识总结
1--<body bgcolor="red">背景颜色 2--<body backgroud＝"back-ground.gif"> 背 ...

jquery实现div遮罩层

jquery实现div遮罩层的更多相关文章

随机推荐

热门专题