メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

モーダル(Modal) v5.0.0-beta1設定変更

BootstrapのJavaScriptモーダルプラグインを使用して、ライトボックス、ユーザー通知、または完全カスタムコンテンツ用のダイアログをサイトに追加。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。

使い方(How it works)

Bootstrapモーダルコンポーネントを使い始める前に、メニューオプションが最近変更されたので、以下に記載。

  • モーダルは、HTML、CSS、JavaScriptで構築。ドキュメント内の他の部分に配置され、<body> からスクロールを削除して、代わりにモーダルコンテンツをスクロールする。
  • モーダルの"backdrop"(背景部分)をクリックすると、自動的にモーダルが閉じる。
  • Bootstrapは一度に1つのモーダルウィンドウしかサポートしない。入れ子になったモーダルは、ユーザー経験が乏しいと思われるためサポートされていない。
  • モーダルは、position: fixed を使用。これは、そのレンダリングに関してちょっと変わったことがある。できれば、他の要素からの干渉を避けるために、モーダルHTMLを最上位に配置して下さい。他の固定要素内で .modal を入れ子になったときに問題に遭遇する可能性がある。
  • 再度、position: fixed のために、モバイルデバイス上のモーダル使用に関するいくつかの注意点がある。詳細は、ブラウザ・サポートの解説に記載。
  • HTML5がそのセマンティクスをどのように定義するかによって、autofocus HTML属性は、Bootstrapのモーダルには何の影響も与えない。同じ効果を得るためにカスタムJavaScriptを使用 v5.0.0-alpha1設定変更
Bootstrap5(5.2.0~)の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
※Bootstrap5(5.1.3)の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
※Bootstrap4.xの設定例
JavaScript$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

実例の見本と使用方法を以下のガイドラインに記載。

実例(Examples)

以下は静的モーダルの例(positiondisplay が再定義されたことを意味する)。モーダルヘッダ、モーダルボディ(padding に必要)、モーダルフッタ(オプション)が含まれます。できる限り、アクションを終了するモーダルヘッダを含めるか、別の明示的な却下アクションの提供を推奨。

見本 モーダルを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div><!-- /.modal-header -->
      <div class="modal-body">
        <p>モーダルボディの本文。</p>
      </div><!-- /.modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!-- /.modal-header -->
      <div class="modal-body">
        <p>モーダルボディの本文。</p>
      </div><!-- /.modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
【設定】
  • div.modal > div.modal-dialog > div.modal-content > {div.modal-header > h5.modal-title《タイトル》 + button.btn-close閉じるアイコンボタン》}《ヘッダ》 + div.modal-body《コンテンツ》 + div.modal-footer《フッタ》
  • ヘッダ(.modal-header)は、《タイトル》(.modal-title)⇒《閉じるアイコンボタン》(button.close)の順に記載
  • プラグインを使ってモーダルを閉じるため、閉じるアイコンボタンや閉じるボタン部分には [data-bs-dismiss="modal"] を入れる
アクセシビリティの設定】
  • モーダルを閉じるボタンとなる button.btn-close に、aria-label 属性(アイコンボタンのラベル)を入れる
【注意】
  • .modalrole="dialog" 属性【v4.5.1で変更】や .modal-dialogrole="document" 属性【v4.5.0で変更】の追加は不要(モーダルを表示する際にスクリプトで .modalrole="dialog"aria-modal="true" が自動的に挿入されるため)
【変更履歴】
  • 【v5.0.0-alpha2】
    • 閉じるボタンの設定の変更(.close.btn-closespan[aria-hidden="true"] > &times; が不要に)
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • モーダルを閉じる:[data-dismiss="modal"][data-bs-dismiss="modal"]
  • 【v5.2.0】
    • border-radius の値を調整したので、若干丸みを帯びたデザインに変更

モーダルの設定(Live demo)

下のボタンをクリックして、動作中のモーダルのデモを切り替える。ページの上からスライドしてフェードイン。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  ココを押すと表示
</button>

<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <p>モーダルのコンテンツ文。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
【設定】
  • button.btn《切替ボタン》 + 〔div.modal.fade[role="dialog"] > div.modal-dialog[role="document"] > div.modal-content > {div.modal-header > h5.modal-title《タイトル》 + button.btn-close[data-bs-dismiss="modal"][aria-label="閉じる"]《閉じるアイコンボタン》}《ヘッダ》 + div.modal-body《コンテンツ》 + div.modal-footer《フッタ》〕《モーダル部分》
  • モーダルのプラグインを使用するため、
    • 切替ボタンには、[data-bs-toggle="modal"](プラグインを有効にする)と、モーダルのID"] か [href="#モーダルのID"]
    • div.modal(ボタンのリンク先)には、id="ID名"tabindex="-1"Esc を押すとモーダルが閉じるようにする)
    をそれぞれ入れること
アクセシビリティの設定】
  • h5.modal-titleid="ID名" を入れ、div.modalaria-labelledby="タイトルのID" 属性(タイトルをモーダルのラベルとして関連付ける)を入れること
  • さらに div.modalaria-describedby 属性を入れてモーダルダイアログの説明をすることも可能
  • 切替ボタン部分には、
    • aria-expanded="false" 属性(支援技術に要素の開閉の状態を伝える)
    • aria-controls="コンテンツのID" 属性(リンク/ボタンリンク/ボタンとコンテンツの関連付け)
    • コントロールが a.btn の場合は、role="button"(支援技術にボタンの役割を伝える)
    を入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="modal"][data-bs-toggle="modal"]
      • [data-target="#モーダルのID"][data-bs-target="#モーダルのID"]
      • [data-dismiss="modal"][data-bs-dismiss="modal"]

静的な背景(Static backdrop)

背景を静的に設定した場合は、モーダルの外側をクリックしてもモーダルは閉じられない。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  ココを押すと表示
</button>

<!-- モーダルの設定 -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">了解</button>
      </div>
    </div>
  </div>
</div>
【設定】
  • .modal[data-bs-backdrop="static"] を追加
  • Esc を押しても閉じないようにするには、さらに [data-bs-keyboard="false"] を追加
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-backdrop="static"][data-bs-backdrop="static"]
      • [data-keyboard="false"][data-bs-keyboard="false"]

長いコンテンツのスクロール(Scrolling long content)

1.モーダル自体をスクロール

モーダルがユーザーのビューポートやデバイスにとって長すぎると、モーダルはページ自体とは独立してスクロール。以下の見本で試して、どういう意味か確認して下さい。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div>
    </div>
  </div>
</div>

2.スクロールバーを表示

.modal-dialog-scrollable.modal-dialog に追加すれば、モーダル本体をスクロールできる。

見本
設定例
<!-- スクロール可能なモーダル -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

垂直方向に中央に配置(Vertically centered)

.modal-dialog-centered.modal-dialog に追加して、モーダルを垂直方向に中央に配置。

見本
設定例
垂直方向に中央揃えのモーダル<!-- 垂直方向に中央揃えのモーダル -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>
垂直方向にスクロール可能なモーダル<!-- 垂直方向にスクロール可能なモーダル -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>
【設定】
  • 垂直方向に中央揃えのモーダル:.modal-dialog.modal-dialog-centered を追加
  • 垂直方向にスクロール可能なモーダル:.modal-dialog.modal-dialog-centered.modal-dialog-scrollable を追加

モーダルの切替(Toggle between modals)v5.0.0-beta3新設、v5.1.2設定変更

data-bs-target 属性と data-bs-toggle 属性を巧妙に配置して、複数のモーダルを切り替える。例えば、すでに開いているサインインモーダル内からパスワードリセットモーダルに切り替えられる。複数のモーダルを同時に開くことはできないので注意。この方法では、2つの別々のモーダルの切り替えのみ。

見本
最初のモーダルを開く
設定例
<div class="modal fade" id="modal1" aria-hidden="true" aria-labelledby="modalLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">モーダル 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#modal2" data-bs-toggle="modal">モーダル2を開く</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="modalLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel2">モーダル 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#modal1" data-bs-toggle="modal">モーダル1に戻る</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#modal1" role="button">最初のモーダルを開く</a>
【設定】
  • 別々のモーダルダイアログ間で data-bs-target を設定
【変更履歴】
  • 【v5.1.1】
    • モーダル2にある「モーダル1に戻る」ボタンの設定から data-bs-dismiss="modal" を削除(v5.1.0で「モーダル1に戻る」ボタンを押してもモーダル1に戻らないバグが発生していたのを修正)
  • 【v5.1.2】
    • モーダル1にある「モーダル2を開く」ボタンの設定からも data-bs-dismiss="modal" を削除

ツールチップとポップオーバー(Tooltips and popovers)v5.2.0設定変更

ツールチップポップオーバーを必要に応じてモーダル内に配置。モーダルが閉じられると、内のツールヒントやポップオーバーも自動的に閉じられる。

見本
Bootstrap5.xの設定例 緑背景が5.2.0での変更箇所
HTML<div class="modal-body">
  <h5>モーダル内のポップオーバー</h5>
  <p>この<a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="ポップオーバーのタイトル" data-bs-content="ポップオーバーのコンテンツ。もう一度ボタンを押すと非表示になります。">ボタン</a> を押すとポップオーバーが表示されます。</p>
  <h5>モーダル内のツールチップ</h5>
  <p><a href="#" data-bs-toggle="tooltip" title="ツールチップ1の表示">このリンク</a>と<a href="#" data-bs-toggle="tooltip" title="ツールチップ2の表示">このリンク</a>をホバーするとツールチップが表示されます。</p>
</div>
【設定】
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-content][data-bs-content]
  • 【v5.2.0】
    • .popover-test[data-bs-toggle="popover"].tooltip-testdata-bs-toggle="tooltip"(実行コードはそれぞれポップオーバーツールチップのものを使用し、独自の設定は不要に)

グリッドを使用(Using the grid )v5.0.0-beta1設定変更

.modal-body 内に .container-fluid を入れ子にして、モーダル内のBootstrapグリッドシステムを利用。次に、通常どおりのグリッドシステムクラスを使用。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="modal-body">
  <div class="container-fluid">
    <p>モーダルのコンテンツ</p>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 mx-auto">.col-md-6 .mx-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        レベル 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            レベル 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            レベル 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
【設定】
  • div.modal-body > div.container-fluid > div.row > div.col(-{breakpoint})-*.m{s|e|x}(-{breakpoint})-auto
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml(-{breakpoint})-*.ms(-{breakpoint})-*
      • .mr(-{breakpoint})-*.me(-{breakpoint})-*

様々なモーダルコンテンツ(Varying modal contents)v5.2.0JavaScriptの設定変更

若干異なる内容で同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、event.relatedTarget 属性とHTML data-bs-* 属性 を使用。

以下に見本とHTMLとJavaScriptの設定例を示す。relatedTarget の詳細は、モーダルイベントの解説に記載。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
HTML<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@president">社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@vice-president">副社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@officer">重役向けモーダルを開く</button>
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel2">新メッセージ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name">受信者:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text">メッセージ:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">送信</button>
      </div>
    </div>
  </div>
</div>
実行コード
Bootstrap5.2.xの設定例 緑背景が5.2.0での変更箇所
JavaScriptconst exampleModal = document.getElementById('exampleModal2')
exampleModal.addEventListener('show.bs.modal', event => {
  // モーダルを起動するボタン
  const button = event.relatedTarget
  // data-bs-* 属性から情報を抽出
  const recipient = button.getAttribute('data-bs-whatever')
  // 必要に応じて、ここでAJAXリクエストを開始可能
  // その後コールバックで更新
  //
  // モーダルの内容を更新
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `${recipient}にメッセージを送信`
  modalBodyInput.value = recipient
})
※Bootstrap5(5.1.3)の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar exampleModal = document.getElementById('exampleModal2')
exampleModal.addEventListener('show.bs.modal', function (event) {
  var button = event.relatedTarget
  var recipient = button.getAttribute('data-bs-whatever')
  
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = recipient + 'にメッセージを送信'
  modalBodyInput.value = recipient
})
※Bootstrap4.xの設定例
JavaScript$('#exampleModal2').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('whatever')
  
  var modal = $(this)
  modal.find('.modal-title').text(recipient + 'にメッセージを送信')
  modal.find('.modal-body input').val(recipient)
})
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの記述をjQueryに依存しない方法に変更
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

アニメーションの削除(Remove animation)

フェードインではなく、いきなり表示されるモーダルにする場合は、モーダルのマークアップから .fade クラスを削除。

見本
設定例
<div class="modal" id="myModal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>
【設定】
  • .modal.fade をはずす

動的な高さのモーダル(Modals with dynamic heights)

モーダルの高さが開いている間に変更され、スクロールバーが表示された場合には、myModal.handleUpdate() を呼び出してモーダルの位置を再調整する必要がある。

アクセシビリティ(Accessibility)

モーダルタイトルを参照する aria-labelledby="...".modal に必ず追加して下さい。さらに、モーダルダイアログの説明を .modalaria-describedby で提供もできる。JavaScript経由で追加するので、role="dialog" をHTMLに追加する必要はない。

YouTube動画の埋め込み(Embedding YouTube videos)

YouTubeの動画をモーダルに埋め込むには、再生を自動的に停止するなどの追加のJavaScriptが必要。詳細は、このStack Overflowの便利な記事に記載。

YouTube IFrame Player APIを利用したYouTube動画の埋め込みの実例 裏技、v5.1.1追加

モーダル起動ボタンを押すと動画が自動再生(音はミュート)し、ループ再生するように設定したい場合は、以下を参照して下さい。

See the Pen Play YouTube in Bootstrap 5 Modal by cccabinet (@cccabinet) on CodePen.

モーダルでアラート表示 ※裏技

見本

※閉じるボタンを押してモーダル(アラート)を閉じて下さい。

Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" data-bs-toggle="modal" data-bs-target="#ModalAlert" class="btn btn-primary">ココを押す</button>

<div class="modal fade" id="ModalAlert" data-bs-backdrop="false" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content border-0">
      <div class="alert alert-warning alert-dismissible fade show mb-0" role="alert">
        <strong>注目!</strong> ここにアラートが表示されます。
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
    </div>
  </div>
</div>
【設定】
  • アラートを表示する際に背景がオーバーレイしないようにモーダル(.modal)に data-bs-backdrop="false" を入れる(そのため閉じるボタンか Esc を押してアラートを閉じる)
  • .modal > .modal-dialog > .modal-content.border-0(モーダルの設定)> .alert.alert-{themecolor}.alert-dismissible.mb-0[role="alert"] > {《アラート文》 + button.btn-close[data-bs-dismiss="modal"]《閉じるボタン》}(アラートの設定)
【注意】
  • 閉じるボタンはモーダルを閉じるために data-bs-dismiss="modal" にすること
  • アラートの上下左右中央表示は .modal-dialog.modal-dialog-centered を追加すれば可能

モーダルでトースト表示 ※裏技、v5.2.0設定変更

見本

※閉じるボタンを押してトーストを閉じて下さい。

Bootstrap5.xの設定例 緑背景が変更箇所

<button type="button" data-bs-toggle="modal" data-bs-target="#ModalToast" class="btn btn-primary">ココを押す</button>

<div class="modal fade" id="ModalToast" data-bs-backdrop="false" tabindex="-1">
  <div class="modal-dialog" style="max-width:350px">
    <div class="modal-content border-0">
      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <img src="..." alt="" class="rounded me-2">
          <strong class="me-auto">Bootstrap</strong>
          <small>11分前</small>
          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="toast-body">
          ここにトーストが表示されます。
        </div>
      </div>
    </div>
  </div>
</div>
【設定】
  • トーストを表示する際に背景がオーバーレイしないようにモーダル(.modal)に data-bs-backdrop="false" を入れる(そのため閉じるボタンか Esc を押してトーストを閉じる)
  • .modal > .modal-dialog[style="max-width:350px"] > .modal-content.border-0(モーダルの設定)> div.toast > {div.toast-header > button.ms-2.mb-1.btn-close[data-bs-dismiss="modal"]《閉じるボタン》}《ヘッダ》 + div.toast-body《コンテンツ》(トーストの設定)
【注意】
  • 閉じるボタンはモーダルを閉じるために data-bs-dismiss="modal" にすること(トーストを複数表示する場合は一番最後のトーストのみを data-bs-dismiss="modal" にしてモーダルを閉じるようにする)
  • トーストの上下左右中央表示は .modal-dialog.modal-dialog-centered を追加すれば可能だが、右上表示には非対応
【変更履歴】
  • 【v5.2.0】
    • .modal-dialog.modal-sm.modal-dialog[style="max-width:350px"]

モーダルの大きさ(Optional sizes)

モーダルには3つのオプションのサイズがあり、修飾クラスを使用して .modal-dialog に配置できる。これらのサイズは、狭いビューポートでの水平スクロールバーの出現を避けるために、特定のブレークポイントで実行される。

サイズ クラス 極小
<576px

≥576px

≥768px

≥992px
特大
≥1200px
.modal-sm width: 100% max-width: 300px
デフォルト(中) なし max-width: 500px
.modal-lg max-width: 800px
特大 .modal-xl max-width: 1140px

修飾クラスを持たないデフォルトモーダルは、「中」サイズのモーダルを構成。

大きさの種類

特大:.modal-xl

大きめ:.modal-lg

小さめ:.modal-sm

参考:デフォルト

設定例
特大<div class="modal-dialog modal-xl">
  ...
</div>
大きめ<div class="modal-dialog modal-lg">
  ...
</div>
小さめ<div class="modal-dialog modal-sm">
  ...
</div>
【設定】
  • .modal-dialog.modal-{size}(上記の「大きさの種類」から選択)を追加

フルスクリーン・モーダル(Fullscreen Modal)v5.0.0-alpha1新設

もう一つの再定義オプションは、.modal-dialog に配置された修飾子クラスを経由して利用できるユーザービューポートをカバーするモーダルをポップアップする。

定義済クラスの種類
ブレークポイント クラス名 フルスクリーンになるビューポートの範囲
常時 .modal-fullscreen すべて
小より下 .modal-fullscreen-sm-down 576px以下
中より下 .modal-fullscreen-md-down 768px以下
大より下 .modal-fullscreen-lg-down 992px以下
特大より下 .modal-fullscreen-xl-down 1200px以下
超特大より下 .modal-fullscreen-xxl-down 1400px以下
見本
設定例
<!-- フルスクリーン・モーダル -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>
【設定】
  • .modal-dialog.modal-fullscreen-{breakpoint}-down を追加(.modal-fullscreen-{breakpoint}-down は上記「定義済クラスの種類」から選択)

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数(Variables)v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、モーダルは、リアルタイムのカスタマイズを強化するために、.modal.modal-backdrop でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定
scss/_modal.scss 内 modal-css-vars の設定--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // v6のTodo:このpaddingをxとyに分割
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
scss/_modal.scss 内 modal-backdrop-css-vars の設定   --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass変数(Sass variables)v5.2.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 modal-variables の設定$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // 下位互換性のためにこれを保持

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

ループ(Loop)

レスポンシブフルスクリーンモーダルは、$breakpoints マップとscss/_modal.scssのループを経由して生成。

デフォルトの設定
scss/_modal.scss 内 modal-fullscreen-loop の設定@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

使用方法(Usage)

モーダルプラグインは、必要に応じて、データ属性やJavaScriptを使用して、非表示のコンテンツを切り替える。また、デフォルトのスクロール動作を再定義し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する .modal-backdrop を生成する。

データ属性経由で(Via data attributes)

切替(Toggle)

JavaScriptを書かずにモーダルを有効にする。特定のモーダルを起動させるためには、data-bs-target="#foo"href="#foo" とともに、ボタンのようなコントローラー要素に data-bs-toggle="modal" を設定して下さい。

ボタンで設定<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">モーダルを起動</button>
リンクで設定<a data-bs-toggle="modal" href="#myModal">モーダルを起動</a>

閉じる(Dismiss)v5.1.0追加

モーダルを閉じるには、下記のようにモーダル内のボタンの data 属性を使用して実行できる:

設定例
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>

または、下記のようにモーダルの外側のボタンで data-bs-target を使用して閉じることもできる:

設定例
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="閉じる"></button>

JavaScript経由で(Via JavaScript)v5.0.0-alpha1設定変更

1行のJavaScriptでモーダルを作成:

Bootstrap5(5.2.0~)の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

または

JavaScriptconst myModalAlternative = new bootstrap.Modal('#myModal', options)
※Bootstrap5(5.1.3)の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
※Bootstrap4.xの設定例
JavaScript$('#myModal').modal(options)
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの記述をjQueryに依存しない方法に変更
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

オプション(Options)

オプションは、データ属性かJavaScriptを使用して渡される。データ属性の場合、data-bs-animation="" のように、data-bs- にオプション名を追加する。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース(単語の先頭を大文字にする)からケバブケース(単語をハイフンでつなぐ)に変更して下さい。例:data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}'data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

名前 タイプ デフォルト 説明
backdrop boolean か string 'static' true モーダルの背景をオーバーレイ表示にする
true:有効/false:無効
または、背景クリック時にモーダルを閉じないようにするには static を指定(実例は静的な背景に記載)
focus boolean true 初期化時にモーダルにフォーカスを移動
true:有効/false:無効
keyboard boolean true Esc が押されたときにモーダルを閉じる
true:有効/false:無効
【変更履歴】
  • 【v5.0.0-beta1】
    • show オプションを廃止(v5では新しいモーダル・インスタンスを作成すると、show プロパティは機能しなくなるため)

メソッド(Methods)v5.0.0-alpha1設定変更、追加

引渡オプション(Passing options)

コンテンツをモーダルとしてアクティブ化する。オプションのオプション object を受け入れる。

Bootstrap5(5.2.0~)の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
※Bootstrap5(5.1.3)の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})
※Bootstrap4.xの設定例
JavaScript$('#myModal').modal({
  keyboard: false
})
メソッド 説明
dispose 要素のモーダルを破棄(DOM要素に保存されているデータを削除)。
getInstance DOM要素に関連付けられたモーダル・インスタンスを取得できる静的メソッド。
getOrCreateInstance
v5.0.2追加
DOM要素に関連付けられたモーダル・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
handleUpdate モーダルの高さが開いているとき(つまり、スクロールバーが表示されているとき)に変更された場合は、モーダルの位置を手動で再調整する。
hide モーダルを手動で非表示にする。モーダルが実際に非表示になる前(つまり、hidden.bs.modal イベントが発動する前)に呼び出し元に戻る
show モーダルを手動で開く。モーダルが実際に表示される前(つまり、shown.bs.modal イベント発動前)に呼び出し元に戻る。また、モーダルイベントで(relatedTarget プロパティとして)受け取ることができる引数としてDOM要素を渡すことができる。(つまり、const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)
toggle モーダルを手動で切り替える。モーダルが実際に表示か非表示になる前(つまり、shown.bs.modalhidden.bs.modal イベント発動前)に呼び出し元に戻る
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().modal('xxx')modal.xxx()
    • getInstance メソッドが追加
  • 【v5.0.2】
    • getOrCreateInstance メソッドが追加
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

イベント(Events)

Bootstrapのモーダルクラスは、モーダル機能に接続するためのいくつかのイベントを公開している。すべてのモーダルイベントはモーダル自体(つまり、<div class="modal">)で発動。

イベントタイプ 説明
hide.bs.modal hide のインスタンス・メソッドが呼び出されると直ちに発動。
hidden.bs.modal モーダルがユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
hidePrevented.bs.modal モーダルの backdrop オプションが static であり、モーダルが表示され、モーダルの外側をクリックされたときに発動。keyboard オプションが false に設定されている場合に Esc を押しても発動。
show.bs.modal show のインスタンス・メソッドが呼び出されると直ちに発動。クリックによって発動した場合、クリックされた要素はイベントの relatedTarget プロパティとして使用可能。
shown.bs.modal モーダルがユーザーに表示されたときに発動(完全にCSS遷移が完了するまで待機)。クリックによって発動した場合、クリックされた要素はイベントの relatedTarget プロパティとして使用可能。
使用例 v5.2.0設定変更
JavaScriptconst myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // 何かをする...
})