とほほのBootstrap 4入門

.modal, .modal-dialog はモーダルダイアログを構成します。.modal-content はそのコンテンツ、.modal-header はヘッダ、.modal-title はタイトル、.modal-body はボディ、.modal-footer はフッタを構成します。モーダルダイアログを表示するボタンには、data-toggle="modal" および data-target="#..." を指定します。

Sample

Code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
  Launch demo modal
</button>
<div class="modal fade" id="modal1" tabindex="-1"
      role="dialog" aria-labelledby="label1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="label1">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>

縦方向中央表示

.modal-dialog-centered はダイアログを画面の上下方向の中央に表示します。

Sample

Code

  <div class="modal-dialog modal-dialog-centered" role="document">
   ...
 </div>

サイズ

.modal-sm, .modal-lg, .modal-xl はモーダルダイアログの最大の横幅を指定します。

Sample

Code

  <div class="modal-dialog modal-sm" role="document">...</div>
  <div class="modal-dialog" role="document">...</div>
  <div class="modal-dialog modal-lg" role="document">...</div>
  <div class="modal-dialog modal-xl" role="document">...</div>

オプション

data-*="..." で下記のオプションを指定することができます。

名前	型	規定値	説明
`show`	boolean	true	モーダルダイアログを表示します。
`focus`	boolean	true	モーダルダイアログにフォーカスを与えます。
`keyboard`	boolean	true	ESC キーでモーダルダイアログを閉じます。
`backdrop`	boolean \| 'static'	true	true を指定すると背景を灰色にして背景クリックでダイアログを閉じます。false を指定すると背景は灰色にせず、クリックしてもダイアログは閉じません。'static' を指定すると背景を灰色にしますが、クリックしてもダイアログは閉じません。

Code

<div class="modal" data-keyboard="false">
  ...
</div>

JavaScriptによる制御

modal(options) は JavaScript でモーダルを制御します。

Sample

Code

<button type="button" onclick="$('#modal4').modal('show')">Open</button>

options には、表示する('show')、表示しない('hide')、トグルする('toggle')、位置を再調整する('handleUpdate')、モーダルを破棄する？('.dispose')を指定可能です。また、.modal({show:true, keyboard:false}) の様に上記のオプションを複数指定することも可能です。

初版:2015年9月6日最終更新:2019年1月6日

https://www.tohoho-web.com/bootstrap/modal.html