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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
深入理解JS异步编程-Promise
Jun 03 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生成年月日下载列表的方法
2015/04/24 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
jQuery实现ichat在线客服插件
2014/12/29 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
区优秀教师事迹材料
2014/02/10 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2014年采购员工作总结
2014/11/18 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
三潭印月的导游词
2015/02/12 职场文书
运动会通讯稿600字
2015/07/20 职场文书
房产遗嘱范本
2015/08/06 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
导游词之潮音寺
2019/09/26 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技