ブートストラップモーダルボックス：軽量でカスタマイズ可能なポップアップウィンドウ

Bootstrap Modal Boxは、アラートポップアップ、ビデオ、畫像などを表示するための軽量でカスタマイズ可能でレスポンシブなJQuery Bootstrapプラグインです。タイトル、ボディ、フッターの3つの部分に分かれており、それぞれにユニークな機(jī)能があります。すべてのコードとスタイルがブートストラップによって事前に定義されているため、JavaScriptコードを記述する必要はありません。

主要な機(jī)能：

• 軽量でレスポンシブ：モーダルボックスは、すべてのデバイスにシンプルでよく表示されているように設(shè)計されています。
• 高度にカスタマイズ可能：簡単にサイズを変更したり、動的コンテンツを追加したり、スクロール可能にしたりできます。
• JavaScriptコードは必要ありません：ブートストラップは、すべての必要なコードとスタイルを事前に定義しました。
• リッチなイベントサポート：jqueryの.on()メソッドを使用して、show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modalなどのさまざまなイベントをバインドできます。コントロール。
• 外部クリックが閉じるのを防ぐことができます：backdropオプションを'static'に設(shè)定することにより、ユーザーがモーダルボックスの外側(cè)をクリックして閉じることを防ぐことができます。

モーダルボックス構(gòu)造：

デフォルトのブートストラップモーダルボックスは次のとおりです

トリガーモーダルボックス：

<a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">點擊打開模態(tài)框</a>

ブートストラップに何をすべきかを伝え、data-toggleブートストラップにどの要素を開くかを伝えます。したがって、そのようなリンクがクリックされるたびに、ID「BasicModal」を持つモーダルボックスが表示されます。 data-target data-toggledata-targetモーダルボックスコード：

以下は、モーダルボックス自體を定義するために必要なマークです。

です。

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模態(tài)框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模態(tài)框主體</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModalaria-labelledbyモーダルボックスのサイズを調(diào)整します：aria-hidden

モーダルボックスのサイズを変更して、モディファイアクラスを div：（大きなモーダルボックス）または

.modal-dialogmodal-lgjqueryを使用してモーダルボックスをアクティブにします：modal-sm

jqueryの関數(shù)を使用してモーダルボックスを制御できます。

<a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">點擊打開模態(tài)框</a>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模態(tài)框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模態(tài)框主體</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>