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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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中获得视频时间总长度的另一种方法
2011/09/15 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
税务专业毕业生自荐信
2013/11/10 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
借款协议书
2014/04/12 职场文书
家长通知书家长评语
2014/04/17 职场文书
道德演讲稿
2014/05/21 职场文书
售房委托书
2014/08/30 职场文书
上课说话检讨书
2015/01/27 职场文书
自荐信格式范文
2015/03/04 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle