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>

拡張機能用スクリプト

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

  • このエントリーをはてなブックマークに追加

関連記事

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

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

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

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑