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を設定することができます。
拡張機能用スクリプト
以下のスクリプトを追加で読み込むことでオプション機能を追加することができます。
ダウンロード
関連記事
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
Comment
Bootstrap Modal + 拡張機能が実装できるプラグイン http://t.co/i0eYzjWCsD
Bootstrap Modal + 拡張機能が実装できるプラグイン http://t.co/nSvsMPYYVV
こんな感じか