【bootstrap】モーダルの作り方

はじめに#

　モーダルは、確認メッセージやエラーなどの際に表示されるポップアップに利用されます。アラートのように設置する場合は閉じるだけですが、フォームを設置して次の画面へ繋げるための中間画面として使われる場合もあります。
　bootstrapを使うことで簡単にモーダルが設置できますので備忘録として残していきます！

書き方#

　公式ホームページから確認することができます。

modal.html

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<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">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

コピペしてきました。基本はこの形になります。
モーダルを表示させるのにクリックするボタンにはdata-toggleを指定します。
そして表示させたいモーダルのidをdata-targetで指定します。
この場合は、Launch demo modalというボタンを押すとexampleModalというidが振られたモーダルが開くというわけですね。

モーダルの方にはheaderとbodyとfooterを指定することができます。
footerにあるdata-dismissを設定すると、モーダルを閉じるボタンが作れます。
さらに、footer部分にformタグを設置することで退会や削除など、取り返しがつかない処理を行う際の確認画面としても使えたりします。

終わりに#

モーダルを使うことでアプリとしての利便性が高まりますのでぜひ使ってみましょう！