Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。
Twitter Bootstrap純正スクリプト
オプション設定でできること
- ページ訪問時に自動的にモーダルウィンドウを開く。
- 背景クリックで閉じる処理を無効化
- レスポンシブ
など
スクリプト
bootstrap.min.jsは全てのJavascriptを含みます。モーダルウィンドウのみを使用する場合はmodal.jsへ置き換えて下さい。また、オープン時のスライド効果を使用したい場合は、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>
実装
<!-- Button to trigger modal --> <a href="#div1101" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- Modal --> <div id="div1101" class="modal fade"> <!-- Modal本体 --> <div class="modal-dialog"> <!-- Modalダイアログ部分 --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <!-- closeボタン --> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
オプション
オプションの設定を行う場合は、以下のように設定して下さい。
<script type="text/javascript"> $('#div1101').modal({ // 背景をオーバーレイするか否か。(デフォルト) true // 'static'を指定した場合は、背景をクリックしてもモーダルを閉じない。 backdrop: 'static', // エスケープキーで閉じるか否か。(デフォルト) true keyboard: false, // 訪問時に自動的に表示を行うか否か。(デフォルト) true show: false }) </script>
サイズ(幅)の設定は、あらかじめ用意されているclass="modal-lg"(900px)もしくはclass="modal-sm"(300px)を「Modalダイアログ部分」に追加するか、独自にclassを設定することができます。
拡張機能用スクリプト
以下のスクリプトを追加で読み込むことでオプション機能を追加することができます。
ダウンロード
関連記事
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
Comment
Bootstrap Modal + 拡張機能が実装できるプラグイン http://t.co/i0eYzjWCsD
Bootstrap Modal + 拡張機能が実装できるプラグイン http://t.co/nSvsMPYYVV
こんな感じか