Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
![](http://kwski.net/blog/wp-content/uploads/2013/05/n__1101-e1368759457896.jpg)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。
Twitter Bootstrap純正スクリプト
オプション設定でできること
- ページ訪問時に自動的にモーダルウィンドウを開く。
- 背景クリックで閉じる処理を無効化
- レスポンシブ
など
スクリプト
bootstrap.min.jsは全てのJavascriptを含みます。モーダルウィンドウのみを使用する場合はbootstrap-modal.jsへ置き換えて下さい。また、オープン時のスライド効果を使用したい場合は、bootstrap-transition.jsを追加でインクルードして下さい。
<link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
実装
<!-- ボタン --> <a href="#div1101" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- モーダルウィンドウ --> <div id="div1101" 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> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"><!-- フッタ --> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div>
オプション
オプションの設定を行う場合は、以下のように設定して下さい。
<script type="text/javascript"> $('#div1101').modal({ backdrop: 'static', // 背景をオーバーレイするか否か。(デフォルト) true // 'static'を指定した場合は、背景をクリックしてもモーダルを閉じない。 keyboard: false, // エスケープキーで閉じるか否か。(デフォルト) true show: false // 初期表示を行うか否か。(デフォルト) true }) </script>
拡張機能用スクリプト
以下のスクリプトを追加で読み込むことでオプション機能を追加することができます。
ダウンロード
関連記事
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
- PREV
- 複数ファイルアップロード
- NEXT
- 独自のCSSやJSを読み込む