Bootstrap実践。モーダルウインドウを作成する方法

2020年9月12日2022年4月14日

前回はBootstrapを使用する際によく利用する、ナビゲーションメニューの作成方法を解説しました。

ナビゲーションメニューはレスポンシブデザインにも対応しているので、本当に使いやすいものとなっています。

今回はナビゲーションメニューと同様によく使用される、モーダルウインドウの作成方法を解説していきます。

<h2>モーダルウインドウとは</h2>
そもそもモーダルウインドウとはなんぞや？という方もいらっしゃると思います。

モーダルウインドウとはボタンを押した後等に表示されるポップアップウインドウのことです。

ただしそのポップアップウインドウ内で指定された操作を完了したり、キャンセル操作するまで他の(元の)画面の操作が行えなくなります。

ウインドウが表示されている間は他の画面の操作が出来ない点がただのポップアップウインドウと異なる点ですね。

よくログイン画面や全画面の広告などでこのモーダルウインドウが使用されています。

モーダルウインドウの作成方法

BootstrapのモーダルウインドウはHTML、CSS、JavaScriptで構築されていおり、モーダルヘッダー、モーダルボディ、モーダルフッターの3つで構成されています。

基本的な文法から使用方法を順番に見ていきましょう。

基本文法

モーダルウインドウの基本文法は以下の通りです。

■記述例

<!-- メインウインドウのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  モーダルウインドウ起動ボタン
</button>

<!-- モーダルウインドウ—>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルウインドウのタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>モーダルウインドウのテキスト</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>

モーダルウインドウはdivタグにmodalクラスを設定し、その下位のタグにもモーダルウインドウ関連のクラスを設定しますが、基本的には決まり文句となっています。

ですので、基本的には記述例をコピペして微調整していけば良いです。

また、メインウインドウのボタンとモーダルウインドウの紐付けはメインウインドウのボタンタグのdata-target属性の値とモーダルウインドウ1番目のdivタグのidの値を合わせることで行います。

記述例ではメインのウインドウで「保存する」ボタンを押された時の確認のモーダルウインドウのイメージとなります。

<h3>モーダルウインドウを画面中央に表示する方法</h3>
基本文法の記述例だとモーダルウインドウは画面上部に表示されます。

これを画面中央に表示したい場合は、2番目のdivタグにmodal-dialog-centeredクラスを適用します。

■記述例

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
　・
　・
　・
  </div>
</div>

複数のボタンからモーダルウインドウを表示する方法

メインウインドウの複数のボタンから一つのモーダルウインドウを表示したい場合があると思います。

その場合は、基本文法の欄でも触れましたが、メインウインドウのdata-target属性とモーダルウインドウの1番目のdivタグのid属性を合わせることで実現できます。

■記述例

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">ボタン1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">ボタン2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">ボタン3</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
　・
　・
　・
</div>

モーダルウインドウをフェードインでなくする方法

基本文法ではモーダルウインドウをフェードインで表示する記述方法でしたが、フェードインではなくパッと表示させたい場合の方法です。

基本文法でモーダルウインドウの1番目のdivタグに指定していた、fadeクラスの指定をなくすと実現できます。

■記述例

<!-- メインウインドウのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  モーダルウインドウ起動ボタン
</button>

<!-- モーダルウインドウ—>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
　・
　・
　・
</div>

モーダルウインドウのサイズを変更する方法

モーダルウインドウは特に指定がなければmax-width500pxとなります。

これ以外にもモーダルウインドウの2番目のdivタグに以下のクラスを指定することでmax-widthを変更することが可能です。

modal-smクラス：300px
modal-lgクラス：800px
modal-xlクラス；1140px

■記述例：modal-smクラスの場合

<!-- メインウインドウのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  モーダルウインドウ起動ボタン
</button>

<!-- モーダルウインドウ—>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
　・
　・
　・
  </div>
</div>