【Twitter Bootstrap】モーダルウィンドウ

今回からjQuery Pluginに入ります。一回目はモーダルウィンドウです。

モーダルウィンドウってなんぞや？って人もいると思いますので、まずはサンプルから。

画像のように、画面全体を覆って、表示されるウィンドウのことです。画像を拡大したり、フォームがポップアップされるときによく使われていますね。

実はこれ、jQueryでも色々なプラグインで提供されています。例えばLightbox(http://lokeshdhakar.com/projects/lightbox2/)が有名ですね。とりあえず今回はTwitter Bootstrapでやってみましょう。

<p><a class="btn" data-toggle="modal" href="#myModal" >ここを押すとモーダルウィンドウが開きます。</a></p>
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>こいつがモーダルウィンドウです。</h3>
</div>
<div class="modal-body">
<p>ここに本文が入ります。</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">ウィンドウを閉じます。</a>
<a href="#" class="btn btn-primary">変更を保存します。</a>
</div>
</div>

重要なところは以下の通り。

• モーダルを開くボタンにA要素を含め、data-toggle="modal"をつける
• モーダルウィンドウの中身はDIV要素でクラスにmodalをつける
• モーダルウィンドウを閉じる「×」にはdata-dismiss="modal"をつける

こんなとこでしょうか。あとは直感的にわかる部分が多いと思います。