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">&times;</button>  <!-- closeボタン -->
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</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を設定することができます。

拡張機能用スクリプト

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