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右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
Python异常学习笔记
2015/02/03 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python爬取天气数据的实例详解
2020/11/20 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
四个太阳教学反思
2014/02/01 职场文书
英文演讲稿开场白
2014/08/25 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
幼儿教师辞职信
2015/02/27 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书