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 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JSONP跨域请求
Mar 02 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
ReactRouter的实现方法
Jan 25 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
使用python爬取B站千万级数据
2018/06/08 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
初中生操行评语大全
2014/04/24 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2014年车间工作总结
2014/11/21 职场文书
党员思想汇报材料
2014/12/19 职场文书
社区文明倡议书
2015/04/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
销售口号霸气押韵
2015/12/24 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
解析redis hash应用场景和常用命令
2021/08/04 Redis