Jquery实现遮罩层的方法


Posted in Javascript onJune 08, 2015

本文实例讲述了Jquery实现遮罩层的方法。分享给大家供大家参考。具体如下:

1、假设#main为页面body中的最外层Div标签

2、背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了):

<!-- Status Bar Start -->
<div id="warning-dialog" class="status warning center-top no-display">
 <p class="closestatus"><a href="javascript:$().hideWarningDialog()" title="Close">x</a></p>
 <div class="clear"></div>
 <p><img src="images/icon_warning.png" alt="Warning" /><span id="warning-dialog-detail">Attention!</span></p>
 <div class="closes">
  <input type="hidden" id="refresh-after-warning" value="false" />
  <input name="" type="image" src="images/niu_qd.jpg" align="absmiddle" class="button_jl" onclick="javascript:$().hideWarningDialog()" />
 </div>
</div>
<!-- Status Bar End -->

3、在script.js中定义遮罩函数以及弹出窗操作函数,当然script.js,jquery.js需要包含在html页面中:

var warning_dialog = $('#warning-dialog'), 
 warning_dialog_detail = $('#warning-dialog-detail'), 
 refresh_after_warning = $('#refresh-after-warning');
// 显示遮罩层
$.fn.showWarningDialog = function(detail, refresh) {
 if ($isIE6) {
  $(".menu_select").hide();
 }
 $.fn.mask();
 warning_dialog_detail.html(detail);
 refresh_after_warning.val(refresh);
 warning_dialog.css({
  "position" : "absolute",
  "left" : "50%",
  "top" : "50%",
  "margin-left" : "-250px",
  "margin-top" : "-100px",
  "border" : "solid 3px #ccc",
  "z-index" : 6000
 });
 warning_dialog.show();
}
// 去除遮罩层
$.fn.hideWarningDialog = function() {
 if ($isIE6) {
  $(".menu_select").show();
 }
 $.fn.unmask();
 if (refresh_after_warning.val() == "true") {
  $('#main').showLoading();
  location.reload(true);
 } else
  warning_dialog.hide();
}
// 显示遮罩效果
$.fn.mask = function() {
 this.unmask();
 // 参数
 var op = {
  bgcolor : '#ccc',
  z : 5100,
  opacity : 0.3
 };
 var position = {
  top : 0,
  left : 0
 };
 var original = $("#main");
 // 创建一个 Mask 层,追加到对象中
 var maskDiv = $('<div class="maskdivgen"> </div>');
 maskDiv.appendTo(original);
 var maskWidth = original.width();
 var maskHeight = original.height();
 maskDiv.css({
  position : 'absolute',
  top : position.top,
  left : position.left,
  'z-index' : op.z,
  width : maskWidth,
  height : maskHeight,
  'background-color' : op.bgcolor,
  opacity : 0
 });
 maskDiv.fadeIn('fast', function() {
  // 淡入淡出效果
  $(this).fadeTo('fast', op.opacity);
 });
 return maskDiv;
}
// 去除遮罩效果
$.fn.unmask = function() {
 var original = $("#main");
 if (this[0] && this[0] !== window.document) {
  original = $(this[0]);
 }
 original.find("> div.maskdivgen").fadeOut('fast', 0, function() {
  $(this).remove();
 });
}

本例中使用main标签获得高度,宽度,如果不想通过标签获得页面高度和宽度,可通过如下方式获得

/* 当前页面高度 */
 function pageHeight() {
  return document.body.scrollHeight;
 }
 /* 当前页面宽度 */
 function pageWidth() {
  return document.body.scrollWidth;
 }

4、调用遮罩层:

<script type="text/javascript">
 function init() {
  <?php
   if ($msg != "用户名输入错误") {
  ?>
   $.fn.showWarningDialog("<?php echo $msg; ?>", "false");
  <?php
   }
  ?> 
 }
 window.onload = function(){
  init();
 };
 </script>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
js实现橱窗展示效果
Jan 11 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 #Javascript
Js数组排序函数sort()介绍
Jun 08 #Javascript
元素绑定click点击事件方法
Jun 08 #Javascript
JavaScript获取URL汇总
Jun 08 #Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 #Javascript
详解JavaScript中的every()方法
Jun 08 #Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 #Javascript
You might like
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
js运动事件函数详解
2016/10/21 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
会话Bean的种类
2013/11/07 面试题
预备党员对照检查材料思想汇报
2014/09/24 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
单位证明范文
2015/06/18 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书