• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

Bootstrap Modal の使い方

Bootstrap でモーダルウィンドウを起動させるに当たり、以下が必要なファイルです。
・jquery.js
・bootstrap-transition.js
・bootstrap-modal.js
・bootstrap.css

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


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 デモ

補足

似たような動きをするモジュールに「Bootstrap Lightbox」があります。

こちらは名前の通り、Lightbox のように画像を拡大表示させるモジュールですが、
こちらのページに設定方法や使い方をまとめていますので、合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください