入力フォームの確認フェイズなどでも使えそうな、BootstrapのModal機能のご紹介です。
普段はモーダルボックスはdisplay:noneで隠しておき、ボタンをクリックしてモーダルボックスを起動（表示）させるイメージになります。
Bootstrap Modalの使い方
Bootstrapでモーダルウィンドウを起動させるに当たり、以下が必要なファイルです。
・jquery.js
・bootstrap-transition.js
・bootstrap-modal.js
・bootstrap.css
・bootstrap-transition.js
・bootstrap-modal.js
・bootstrap.css
Ver2.1ですが、bootstrap-modal.jsファイルの一式は以下のページからでもダウンロード可能です。
Bootstrap Modal
Bootstrap Modalの設置
各ファイルを、<head>内か</body>の直前に設置します。|
1 2 3 4 |
<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"）を指定し、ボタンをクリックしてモーダルボックスを表示させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> <h2 id="myModalLabel">モーダルボックス</h2> </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のように画像を拡大表示させるモジュールですが、こちらのページに設定方法や使い方をまとめていますので、合わせて参考にしてみてください。
コメント
アバターを消すことはできますでしょうか？？？
ウィジェットを使うと出来るのですが、投稿ページや固定ページでの
消す方法が分かりませんでした。
お分かりであれば教えて下さい！
宜しくお願いします。
コメントいただき有り難うございます。
プラグインファイルの細かい部分までは見ていないので恐縮ですが、
「消す」というのが、設定上は出来ないようです。
div.quick-chat-history-header img.avatar {display: none}
で、アバターをCSSで非表示にすると
画面上には表示されなくなるかと思います。