本文實例講述了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程序設計有所幫助。

總結

以上是生活随笔為你收集整理的php 遮罩层,Jquery实现遮罩层的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。