Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
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>
拡張機能用スクリプト
以下のスクリプトを追加で読み込むことでオプション機能を追加することができます。
ダウンロード
関連記事
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
- PREV
- 複数ファイルアップロード
- NEXT
- 独自のCSSやJSを読み込む