jquery に基づく Blockui プラグインがポップアップを表示します

Blockui はマスク レイヤーを表示してユーザーのページ操作を禁止したり、ajax リクエストを送信するときにプロンプ​​ト情報を表示したりすることもできます。また、ログイン ウィンドウの表示や画像の表示などにも使用できます。
blockui プラグインは、主に blockUI と unblockUI という 2 つのメソッドを使用して、ポップアップ レイヤーの表示または非表示を制御します。blockUI メソッドでいくつかのパラメーターを指定して、コンテンツ、サイズ、位置などを制御できます。ポップアップレイヤーの。 blockUI メソッドの一般的に使用されるパラメーターは、message、css、overlayCSS、showOverlay です。
メッセージ: 主に、表示するコンテンツを設定するために使用されます。テキスト、HTML コードに直接設定することも、jquery を使用してページ上の非表示の div を取得することもできます。
css: 主に、ポップアップ レイヤーの位置、サイズ、境界線などを含む、ポップアップ レイヤーのスタイルを設定するために使用されます。
OverlayCSS: 主に、背景色、透明度などを含むマスク レイヤーのスタイルを設定するために使用されます。
ShowOverlay: 主にマスク レイヤーを表示するかどうかを設定するために使用されます。マスク レイヤーを非表示にしたい場合は false に設定できます。
いくつかの例を通して、具体的な使用法を見てみましょう。 jquery.min.js ファイルと jquery.blockui.js ファイルをページにインポートします。 具体的な実装コードは次のとおりです。

コードをコピーします コードは次のとおりです:

$("#btnSubmit").click(function () {
$.blockUI({
メッセージ: $("#loginForm"),
css: {
幅: '300px',
高さ: '300px',
左: ($( window).width() - 300) / 2 'px',
top: ($(window).height() - 300) / 2 'px',
border: 'none'
}
});
} );
$("#btnLogin").click(function () {
$.blockUI({
メッセージ: "

お待ちください...

",
css: {
border: '1px ソリッドブラック'
}
});
setTimeout(function () { $.unblockUI () }, 1000);
});
$("#btnCancel").click(function () {
$.unblockUI();
}); >
対応する HTML コードは次のとおりです:

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

;td>

ユーザー名: ;td>
/td>

声明：

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