jQuery ページのマスク実装 code_jquery-jsチュートリアル-php.cn

jQuery ページのマスク実装 code_jquery

WBOY

リリース： 2016-05-16 18:36:51

オリジナル

1411 人が閲覧しました

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をサポート

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jQuery ページのマスク実装 code_jquery