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 & ...

随机推荐

centos7编译安装pure-ftpd-1.0.42
一.下载 wget https://download.pureftpd.org/pub/pure-ftpd/releases/pure-ftpd-1.0.42.tar.gz 二.安装 tar xvf ...
Spark ML 文本的分类
最近一直在研究Spark的分类算法,因为我们是做日志文本分类,在官网和各大网站一直没找到相应的Demo,经过1个多月的研究,终于有点成效. val sparkConf = new SparkConf( ...
iOS多线程编程之Grand Central Dispatch(GCD)介绍和使用
http://blog.csdn.net/totogo2010/article/details/8016129 GCD很好的博文
解决eclipse中安装AIX2插件问题
为了做webservice,查了下,需要用到AXIS2(当然也有别的方法,貌似更复杂,详情可以参看:java开发webservice的几种方式).可试了N次,下载的codegen和service插件始 ...
HTML中行内元素与块级元素的区别
块级元素:独占一行,可设宽高,内外边距:块级元素有form,p,h1到h6,ol ,ul ,dl和dd和dt ,hr,li,pre,caption ,div ,table ,tr ,td ,th等. ...
js复制input 框中的值
function copy(){ var Url2=document.getElementById("copyValue"); Url2.select(); document.ex ...
Python变量作用域（一）
在一个程序中使用变量名时,Python创建.改变或者查找变量名都是在所谓的命名空间中进行的.作用域指的就是命名空间. Python中的变量名在第一次赋值时已经创建,并且必须经过赋值后才能够使用.由于变 ...
vagrant系列教程(四)：vagrant搭建redis与redis的监控程序redis-stat（转）
上一篇php7环境的搭建真是火爆,仅仅两天时间,就破了我之前swagger系列的一片文章,看来,大家对搭建环境真是情有独钟. 为了访问量,我今天再来一篇Redis的搭建.当然不能仅仅是redis的搭 ...
ComboBox的数据绑定
这里的ComboBox指System.Windows.Forms中的ComboBox. 使用对象数据源 IList<Model> models = ModelService.GetAllM ...
require和include的区别
require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...

jquery实现div遮罩层

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

随机推荐

热门专题