ホームページ > ウェブフロントエンド > jsチュートリアル > Bootstrap モーダル Dialog_JavaScript スキルの簡単な使用

Bootstrap モーダル Dialog_JavaScript スキルの簡単な使用

WBOY
リリース: 2016-05-16 15:03:11
オリジナル
1546 人が閲覧しました

モーダル は、親フォームをカバーするサブフォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは情報や対話などを提供します。

このプラグインの機能を個別に参照したい場合は、modal.js を参照する必要があります。あるいは、ブートストラップ プラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。
1. 使用方法
モーダルプラグインの非表示コンテンツを切り替えることができます:
data 属性を使用: コントローラー要素 (ボタンやリンクなど) に属性 data-toggle="modal" を設定し、data-target="#identifier" または href="#identifier" を設定して特定のモードを指定します。ステータスボックス (id="identifier" 付き)。
JavaScript 経由: この手法を使用すると、JavaScript の単純な行
で id="identifier" を指定したモーダルを呼び出すことができます。 $('#identifier').modal(options)
2. 簡単な例

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>
ログイン後にコピー

モーダル ダイアログは、ボタンまたはリンクを使用して直接呼び出すことができます。簡単な使用法は次のとおりです。

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

さらに、次のように、ダイアログ ボックスが開かれるたびにフォーム データをクリアできるようにする必要がある場合:

コードをコピー コードは次のとおりです:
$('#modal1').modal('hide ');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //コントラクトを追加した後、フォーム操作をクリアします

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート