[BootStrap]Modalsを表示させる

BootStrapのModalsのところをみながら実際に、実装方法を確認しました。

コーディングは、下のようになりました。

<div class="container"> <div class="row"> <div class="span12"> <div class="modal hide" id="alert" tabindex="-1" role="dialog" aria-hidden="true" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>エラー</h3> </div> <div class="modal-body"> <p>ここにテキストが入ります。</p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a> </div> </div> </div> </div> </div>

で、これを表示する方法は、jQueryを使って下のように呼び出す。

$('#alert').modal({ show:true });

表示された結果は、↓

これで、Modalsを気持ちよく呼び出すことができそうです。