Bootstrap_Javascript_pop-up_html/css_WEB-ITnose

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">&times;</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. data-toggleクラスがポップアップウィンドウをトリガーします（JSを記述する必要はありません）

1. を宣言しますモーダル ポップアップ ウィンドウでは、モーダルの制御に加えて、data-toggle と data-target の 2 つの必要な属性をカスタマイズするだけで済みます。ブートストラップ フレームワークは、モーダル ポップアップ ボックスの他のカスタム データも提供し、モーダル ポップアップを制御します。

3. JS トリガー ポップアップ ウィンドウ (JS を記述する必要があります)

1. カスタム属性を使用してモーダル ポップアップ ボックスをトリガーすることに加えて、モーダル ポップアップ ウィンドウもトリガーできます。 JavaScript メソッドを介して。要素にイベントを与えることでトリガーされます。たとえば、ボタンにクリック イベントを与えて、モーダル ポップアップ ウィンドウをトリガーします。

HTML:

<!-- 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">&times;</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>

JS:

点击我<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">&times;</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. JavaScript を使用してモーダル ポップアップ ウィンドウをトリガーする場合、Bootstrap フレームワークは、主に

属性設定を含むいくつかの設定を提供します。

りー

パラメータ設定:

イベント設定:

  $(function(){    $(".btn").click(function(){      $("#mymodal").modal("toggle");    });  });

4. ポップアップウィンドウのサイズ

Bootstrap フレームワークは、さまざまなサイズのモーダル ポップアップ ウィンドウも提供します。

一つは大きいサイズのスタイルは「

modal-lg

」です

$(function(){    $(".btn").click(function(){        $("#mymodal").modal({            keyboard:false        });    });});

もう一つは小さいサイズのスタイル「modal-sm」です。