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 相关文章推荐
自动更新作用
Oct 08 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
Python Property属性的2种用法
2015/06/21 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python callable内置函数原理解析
2020/03/05 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
保密工作目标责任书
2014/07/28 职场文书
单位委托书格式范本
2014/09/29 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis
Golang Web 框架Iris安装部署
2022/08/14 Python