php 遮罩层,Jquery实现遮罩层的方法

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

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

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

x

Attention!

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 = $('

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、调用遮罩层：

function init() {

if ($msg != "用户名输入错误") {

?>

$.fn.showWarningDialog("<?php echo $msg; ?>", "false");

}

?>

}

window.onload = function(){

init();

};

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