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>

拡張機能用スクリプト

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

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

関連記事

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

no image

時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

no image

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

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

no image

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

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

Message

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

*

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

    PAGE TOP ↑