ホームページ > 記事 > ウェブフロントエンド > jqueryモーダルダイアログの究極バージョンの実装 code_jquery

jqueryモーダルダイアログの究極バージョンの実装 code_jquery

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

ページがスクロールすると、スクロールバーが画面の中央に固定されるため、モーダルダイアログボックスには 2 種類のコンテンツが表示されます。1 つは iframe の導入、もう 1 つは HTML ステートメントの挿入です。これはウェブサイト開発で非常に一般的に使用されており、このプラグインの使用は非常に簡単です。ランニング効果を見てみましょう。

プラグインの使用法
1. まずスタイルファイルを導入します。詳細なコードは次のとおりです:

中の ID を忘れないでください。これはプラグインスキンを切り替えるために使用されます。
2. 次に、jQuery の js ファイルを導入します。具体的なコードは次のとおりです。
4. クリック用の HTML コードを記述します。コードは次のとおりです:

Click me--modalダイアログボックス

5. クリックモーダルダイアログボックスをIDを使用してdivにバインドするJavaScriptコードを作成します。「diagx」の具体的なコードは次のとおりです

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

このプラグインのデフォルトのパラメータとIntopacity 表現モードダイアログの背景 (つまり、ページマスクレイヤー全体) は「0.2」です。この例全体の HTML コード全体は次のとおりです:

コードをコピーしますコードは次のとおりです: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<スクリプト src="js/jquery.js">
<スクリプト src="js/dialog.js">
<スクリプト> type="text/javascript ">
$(document).ready(function(){
$('#diagx').ShowDialog({
幅: "500",
高さ: "300"、
タイトル: "モーダルダイアログ"、
スキン: "青"、
フレームURL: "http://www.baidu.com/"、
ContentFlag: "0" ,
コンテンツ:"

テストデータ

"
});
モーダルダイアログ ;

をクリックしてください

このコードの実行中に、ID が「diagx」の div レイヤーをクリックすると、モーダルダイアログボックスが表示されます。
プラグインのソースコードは以下からダウンロードできますので、ぜひダウンロードしてご利用いただき、改善後はお知らせください。私も改善させていただきます。ありがとう。

パッケージのダウンロードアドレス

声明：

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

前の記事：js 関数の上書きとオーバーロード_javascript スキル次の記事：js 関数の上書きとオーバーロード_javascript スキル

続きを見る

jqueryモーダルダイアログの究極バージョンの実装 code_jquery

関連記事