Bootstrap Modal + 拡張機能が実装できるプラグイン

n__1101

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。

2014/06/16 Bootstrap3対応版に書き換えをしました。

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を設定することができます。

拡張機能用スクリプト

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

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

関連記事

n__1153

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

n__1056

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

PhotoCradle

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

n__998

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

n__1109

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

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

n__1169

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

631

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

Comment

Message

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


*

PAGE TOP ↑