bootstrapのmodalテンプレ

Yukimi Sato 710views 更新:2014年3月12日
リンク
<a href="#id" role="button" data-toggle="modal">クリックで表示</a>
modal本体
<div id="id" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="idLabel" aria-hidden="true">
<div class="modal-header">
タイトル
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
ここに表示したい内容
</div>
<div class="modal-footer">
フッター(ボタンを置いたりする場合は必要)
</div>
</div>
リンクと本体の記述位置は近くなくて平気です。
本体はフッター直前など、読み込みの優先順位が低い位置に記述することで、
表示する際にラグが発生することを防げます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません