编程 Javascript

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周围都灰色不能操作)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

直接生成打开窗口代码，不必下载

May 14 Javascript

JQuery与Ajax调用新浪API获取短网址的代码

Feb 07 Javascript

浅谈nodeName,nodeValue,nodeType,typeof 的区别

Jan 13 Javascript

全面解析Bootstrap表单使用方法（表单控件状态）

Nov 24 Javascript

javascript表单处理具体实现代码(表单、链接、按钮)

May 07 Javascript

使用JavaScript实现弹出层效果的简单实例

May 31 Javascript

JavaScript实现打地鼠小游戏

Apr 23 Javascript

vue+ElementUI实现订单页动态添加产品数据效果实例代码

Jul 13 Javascript

Angular实现的简单查询天气预报功能示例

Dec 27 Javascript

深入Vue-Router路由嵌套理解

Aug 13 Javascript

React中this丢失的四种解决方法

Mar 12 Javascript

Vue3.0数据响应式原理详解

Oct 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

PHP的面向对象编程

2006/10/09 PHP

jQuery获取注册信息并提示实现代码

2013/04/21 Javascript

调试JavaScript中正则表达式中遇到的问题

2015/01/27 Javascript

js中 javascript:void(0) 用法详解

2015/08/11 Javascript

JS实现的竖向折叠菜单代码

2015/10/21 Javascript

常用Javascript函数与原型功能收藏(必看篇)

2016/10/09 Javascript

js编写的treeview使用方法

2016/11/11 Javascript

jQuery中extend函数简单用法示例

2017/10/11 jQuery

Angular2实现组件交互的方法分析

2017/12/19 Javascript

详解vue2.0 不同屏幕适配及px与rem转换问题

2018/02/23 Javascript

vue自定义指令的创建和使用方法实例分析

2018/12/04 Javascript

js实现二级联动简单实例

2020/01/11 Javascript

javascript实现画板功能

2020/04/12 Javascript

用Python写的图片蜘蛛人代码

2012/08/27 Python

Python中函数的参数传递与可变长参数介绍

2015/06/30 Python

在Mac OS系统上安装Python的Pillow库的教程

2015/11/20 Python

十条建议帮你提高Python编程效率

2016/02/16 Python

django model去掉unique_together报错的解决方案

2016/10/18 Python

python判断字符串是否是json格式方法分享

2017/11/07 Python

详解python多线程、锁、event事件机制的简单使用

2018/04/27 Python

解决matplotlib库show()方法不显示图片的问题

2018/05/24 Python

python实现按长宽比缩放图片

2018/06/07 Python

pytorch 在sequential中使用view来reshape的例子

2019/08/20 Python

Python hmac模块使用实例解析

2019/12/24 Python

怎么快速自学python

2020/06/22 Python

美国著名的家居用品购物网站：Bed Bath & Beyond

2018/01/05 全球购物

Java方面的关于数组和继承的笔面试题

2015/09/18 面试题

能否解释一下XSS cookie盗窃是什么意思

2012/06/02 面试题

拉丁舞学习者的自我评价

2013/10/27 职场文书

项目经理的岗位职责

2013/11/23 职场文书

请假条标准格式规范

2014/04/10 职场文书

初三学习计划书范文

2014/04/30 职场文书

家庭困难证明

2014/10/12 职场文书

小升初自荐信怎么写

2015/03/26 职场文书

干部培训工作总结2015

2015/05/25 职场文书

先进教师个人主要事迹材料

2015/11/03 职场文书