Bootstrap でModal（モーダルボックス）を使う方法

スポンサード

入力フォームの確認フェイズなどでも使えそうな、Bootstrap の Modal 機能のご紹介です。

普段はモーダルボックスは display:none で隠しておき、ボタンをクリックしてモーダルボックスを起動（表示）させるイメージになります。

Bootstrap Modal の使い方

Bootstrap でモーダルウィンドウを起動させるに当たり、以下が必要なファイルです。

 ・jquery.js
 ・bootstrap-transition.js
 ・bootstrap-modal.js
 ・bootstrap.css

Ver2.1 ですが、bootstrap-modal.js ファイルの一式は以下のページからでもダウンロード可能です。

Bootstrap Modal

Bootstrap Modal の設置

各ファイルを、<head> 内か </body> の直前に設置します。

<link rel="stylesheet" href="./bootstrap.css">
<script src="./jquery.min.js"></script>
<script src="./bootstrap-modal.js"></script>
<script src="./bootstrap-transition.js"></script>

あとはボタンのリンク先に任意のID（id="myModal"）を指定し、ボタンをクリックしてモーダルボックスを表示させます。

<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal起動</a>
 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">モーダルボックス</h3>
  </div>
  <div class="modal-body">
    <p>モーダルボックスの中身です。</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">閉じる</button>
    <button class="btn btn-primary">完了</button>
  </div>
</div>

以下に簡単な Bootstrap Modalのデモを用意しました。
Bootstrap Modal デモ