Jquery实现遮罩层的方法

前端技术 2023/09/01 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1653

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案