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>

拡張機能用スクリプト

以下のスクリプトを追加で読み込むことでオプション機能を追加することができます。
ダウンロード

: selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

: カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。ダウンロードスクリプト

: 親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモスクリプト実装 responsive_head

: 様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

: Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。ダウンロード *黄色ボタン