1. 構造解析
Bootstrap フレームワークのモーダル ポップアップ ボックスはそれぞれ「modal」、「modal-dialog」、「modal-content」スタイルを使用し、ポップアップ ウィンドウの実際のコンテンツは「modal-content」に配置されます。そのメインには次の 3 つの部分も含まれています:
☑ 一般に「modal-header」で表されるポップアップボックスのヘッダーには、主にタイトルと閉じるボタンが含まれます
☑ ポップアップ ボックスの本体。通常は「modal-body」で表され、ポップアップ ボックスのメイン コンテンツです。
☑ ポップアップボックスのフット部分は通常「modal-footer」で表され、主に操作ボタンが配置されます
<div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
2. データ切り替えクラスはポップアップ ウィンドウをトリガーします (JS を記述する必要はありません)
1. モーダル ポップアップ ウィンドウ宣言 。カスタマイズする必要があるのは、data-toggle と data-target の 2 つの属性のみです。
<!-- data-target触发模态弹出窗元素 --> <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button> <!-- 模态弹出窗内容 --> <div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>
2. データパラメータの説明
データトグルとデータターゲットによるモーダル ポップアップ ウィンドウの制御に加えて、ブートストラップ フレームワークは、モーダル ポップアップ ウィンドウを制御するためのモーダル ポップアップ ボックス用の他のカスタム データ属性も提供します。
3. JSトリガーポップアップウィンドウ(JSの記述が必要)
1. カスタム属性を使用してモーダル ポップアップ ボックスをトリガーすることに加えて、JavaScript メソッドを通じてモーダル ポップアップ ウィンドウをトリガーすることもできます。要素にイベントを与えることでトリガーされます。たとえば、ボタンにクリック イベントを与えて、モーダル ポップアップ ウィンドウをトリガーします。HTML:
<div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
$(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });
を含むいくつかの設定を提供します。
プロパティ設定:
$(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:false }); }); });
イベント設定:
$('#myModal').on('hidden.bs.modal', function (e) { // 处理代码... })
4. ポップアップウィンドウのサイズ
Bootstrap フレームワークでは、モーダル ポップアップのさまざまなサイズも提供されます。1 つは、大きいサイズのスタイル
「modal-lg」です。
<divclass="modal-dialog modal-lg"> <divclass="modal-content"> ... </div> </div>
modal-sm」です。
<divclass="modal-dialog modal-sm"> <divclass="modal-content"> ... </div> </div>