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 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
js控制div弹出层实现方法
May 11 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
JS实现碰撞检测效果
Mar 12 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
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Prototype Selector对象学习
2009/07/23 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python多线程实例教程
2014/09/06 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
西门豹教学反思
2014/02/04 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android