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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
学习ExtJS form布局
Oct 08 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 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 stream_context_create()作用和用法分析
2011/03/29 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
重新认识php array_merge函数
2014/08/31 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
全面理解闭包机制
2016/07/11 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python yield和Generator函数用法详解
2020/02/10 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
几个Shell Script面试题
2014/04/18 面试题
纪念建党演讲稿范文
2014/01/13 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
优秀党员事迹材料
2014/12/18 职场文书
交通安全温馨提示语
2015/07/14 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书