ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery ページのマスク実装 code_jquery

jQuery ページのマスク実装 code_jquery

WBOY
WBOYオリジナル
2016-05-16 18:36:511462ブラウズ

Ajax アプリケーションでは、ダイアログ (Div モードで表示) を表示する前に、最初にマスクが作成されます。よく使われるので、自分が使いやすいように jQuery プラグインとして作成しました。

コードをコピー コードは次のとおりです。

(function($){
$.extend ({
documentMask: function(options){
// 拡張パラメータ
var op = $.extend({
opacity: 0.8,
z: 10000,
bgcolor: ' #000'
}, options);

// マスクレイヤーを作成し、 document.body に追加します
$('
< ;/div> ').appendTo(document.body).css({
位置: '絶対',
上: '0px',
左: '0px',
'z-インデックス': op .z,
幅: $(document).width(),
高さ: $(document).height(),
'背景色': op.bgcolor,
opacity: 0
}).fadeIn('slow', function(){
// フェードインおよびフェードアウト効果
$(this).fadeTo('slow', op.opacity);
}).click (function(){
// クリックイベント、マスクは破棄されます
$(this).fadeTo('slow', 0, function(){
$(this).
});
});
});

使い方



コードをコピー
コードは次のとおりです: $.documentMask(); $.documentMask({ 'opacity': 0.6, 'bgcolor': '#E79673',
'z': 1000000
} );


パラメータのうち、z は z-index を表します。

互換性
IE 6.0、FF2、Safari 3.1、Opera 9.0をサポート
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。