ブートストラップ4モーダル

モーダルコンポーネントは、現在のページの上部に表示されるダイアログボックス/ポップアップウィンドウです。

モーダルを作成する方法

次の例は、基本的なモーダルを作成する方法を示しています。

例

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>


<div class="modal" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">

      
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      
      <div class="modal-body">
        Modal body..
      </div>

      
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
</div>
</div>

アニメーションを追加する

クラスを使用して.fade、モーダルを開いたり閉じたりするときにフェード効果を追加します。

例

<div class="modal fade"></div>


<div class="modal"></div>

モーダルサイズ

.modal-sm 小さいモーダルの.modal-lgクラス、大きいモーダルのクラス、または特大のモーダルのクラスを追加して、モーダルのサイズを変更し.modal-xlます。

<div>クラスを持つ要素にサイズクラスを追加します.modal-dialog：

スモールモーダル

ラージモーダル

特大モーダル

デフォルトでは、モーダルのサイズは「中」です。

中央モーダル

.modal-dialog-centered クラスを使用して、モーダルをページ内で垂直方向と水平方向の中央に配置します。

例

スクロールモーダル

モーダル内に多くのコンテンツがある場合、スクロールバーがページに追加されます。以下の例を参照して理解してください。

例

ただし、：に追加.modal-dialog-scrollableすることで、ページ自体ではなく、モーダル内でのみスクロールすることができます。.modal-dialog

例

完全なブートストラップモーダルリファレンス

すべてのモーダルオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSモーダルリファレンスにアクセスしてください。

❮ 前次 ❯

ブートストラップ4チュートリアル

ブートストラップ4グリッド

ブートストラップ4その他

ブートストラップ4Ref

ブートストラップ4モーダル