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

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

このプラグインの機能を個別に参照したい場合は、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();}); //コントラクトを追加した後、フォーム操作をクリアします

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