Bootsrapでモーダル表示HTML/HAMLテンプレート


Eye Catch Image

Twitter Bootsrapでモーダル表示HTML/HAMLテンプレートを作ってみました。
もしTwitterブートストラップでモーダルを作る際には、試してみてください!


🎃 HTML/HAMLテンプレート

BootsrapモーダルのHTMLのテンプレート。

<!-- モーダル呼び出し側 -->
<a class="btn" data-toggle="modal" href="#show_modal" role="button">
モーダル呼び出しボタン
</a>
<!-- モーダル内容 -->
<div id="show_modal" class ="modal hide fade" aria-hidden="true" aria-labelledby="modal_label" role="dialog" style="display: none; " tabindex="-1">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
<h3 id="modal_label">モーダル画面のタイトル</h3>
<div class="modal-body">
<h4>テーマ</h4>
<p>メッセージ</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Change</button>
</div>
</div>
</div>

BootsrapモーダルのHAMLのテンプレート。

-# モーダル呼び出し側
%a.btn{"data-toggle" => "modal", :href => "#show_modal", :role => "button"} モーダル呼び出しボタン
-# モーダル内容
#show_modal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "modal_label", :role => "dialog", :style => "display: none; ", :tabindex => "-1"}
.modal-header
%button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
%h3#modal_labelモーダル画面のタイトル
.modal-body
%h4テーマ
%pメッセージ
.modal-footer
%button.btn{"data-dismiss" => "modal"} Close
%button.btn.btn-primary Change

下は、Bootsrap/Bootswatch/Cosmoでのモーダルのサンプルです。

fpu_tmp_1354801932.2845_6c09fa

🚌 おまけ:Bootsrapでレスポンシブ

Twitter Bootsrapでレスポンシブのデザインにするときについつい忘れてしまうのでメモ。

HTMLのヘッダに次のコードを入れる

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

これで小1時間無駄にした〜〜orz

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)