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 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
详解Bootstrap插件
Apr 25 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
Vue监听滚动实现锚点定位(双向)示例
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
PHP生成唯一订单号
2015/07/05 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中的全局变量用法分析
2015/06/09 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python网络编程之五子棋游戏
2020/05/14 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
项目经理任命书
2014/06/04 职场文书
安全环保演讲稿
2014/08/28 职场文书
公证委托书格式
2014/09/13 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
公司人力资源管理制度
2015/08/05 职场文书
党员反邪教心得体会
2016/01/15 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS