Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)


Posted in Javascript onJuly 14, 2016

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=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>

以上这篇Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Vue异步组件使用详解
Apr 08 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 #Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 #Javascript
javascript运算符语法全面概述
Jul 14 #Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 #Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 #Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 #Javascript
全面了解addEventListener和on的区别
Jul 14 #Javascript
You might like
php部分常见问题总结
2008/03/27 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
浅析python中while循环和for循环
2019/11/19 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python定义类的简单用法
2020/07/24 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
七一党建活动方案
2014/01/28 职场文书
考试诚信承诺书
2014/05/23 职场文书
党支部培养考察意见
2015/06/02 职场文书
纪律委员竞选稿
2015/11/19 职场文书
Pytest中conftest.py的用法
2021/06/27 Python