ブートストラップモーダルの理解-CSSチュートリアル-php.cn

Understanding Bootstrap Modals

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

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

主要な機能：

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

モーダルボックス構造：

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

Understanding Bootstrap Modals

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

リンクまたはボタンを使用して、モーダルボックスをトリガーできます。トリガー要素のマーカーは次のようになる場合があります：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a>

ログイン後にコピー

リンク要素には2つのカスタムデータプロパティがあることに注意してください。

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

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

モーダルボックスの親divは、上記のトリガー要素で使用されているIDと同じでなければなりません。この場合、それは

です。

および

<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">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </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>

ログイン後にコピー

プロパティはアクセシビリティに使用され、保持することをお勧めします。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModalaria-labelledbyモーダルボックスのサイズを調整します：aria-hidden

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

（小さなモーダルボックス）に追加できます。

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

jqueryの関数を使用してモーダルボックスを制御できます。

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a>

ログイン後にコピー

optionsは、次のような動作をカスタマイズするために使用されるJavaScriptオブジェクトです。

<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">基本模态框</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h3>模态框主体</h3> </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>
ログイン後にコピー
ログイン後にコピー
その他の利用可能なオプションは、
、keyboard、showです。 focus

ブートストラップモーダルボックスイベント：
jQueryの
メソッドを使用して、さまざまなイベントをバインドして、ブートストラップモーダルボックスの動作をさらにカスタマイズできます。 .on()

概要：
Bootstrap Modal Boxは、Bootstrapが提供する最高のプラグインの1つです。初心者のデザイナーにとって、これはJavaScriptコードを作成せずにポップアップにコンテンツをロードする最良の方法の1つです。

（以下はFAQパーツであり、元のテキストに従って書き換えられ、合理化されています）faq：

ブートストラップモーダルボックスの目的は何ですか？
は、ユーザーがフォーム、画像、または製品の詳細を表示するためによく使用されることなく、ポップアップディスプレイ情報を作成します。

JavaScriptを使用してブートストラップモーダルボックスをトリガーする方法は？

などのメソッドを使用します。 .modal('show') $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');

JavaScriptを使用してBootstrap Modal Boxを閉じる方法は？

などのメソッドを使用します。 .modal('hide') $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('hide');

ブートストラップモーダルボックスの外観をカスタマイズする方法は？
クラス名（
、、ブートストラップカラークラスなど）を使用してカスタマイズできます。 .modal-lg .modal-sm

同じページで複数のモーダルボックスを使用できますか？
はい、ただし一度に表示できるのは1つだけです。

ブートストラップモーダルボックスにアニメーションを追加する方法は？
CSSまたはJavaScriptライブラリ（Animate.cssなど）を使用できます。

動的コンテンツをブートストラップモーダルボックスにロードする方法は？
ajaxが利用可能です。

ブートストラップモーダルボックスをスクロール可能にする方法は？
クラスを使用します。 .modal-dialog-scrollable
ユーザーが外部でクリックしてブートストラップモーダルボックスを閉じることを防ぐ方法は？
オプションをに設定します。 backdrop 'static'
ブートストラップモーダルボックスはモバイルデバイスをサポートしていますか？
サポートされ、応答性があります。

以上がブートストラップモーダルの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。