5.3 ブートストラップモーダルボックス(Modal)プラグイン

---

Bootstrap モーダル ボックス (Modal) プラグイン

モーダル ボックス (Modal) は、親フォーム上にオーバーレイされる子フォームです。通常、その目的は、親フォームを離れることなく何らかの対話ができる別のソースからのコンテンツを表示することです。サブフォームは、情報や対話などを提供できます。

注: このプラグインの機能を個別に参照したい場合は、modal.js を参照する必要があります。あるいは、「ブートストラップ プラグインの概要」の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

使用法

モーダル プラグインの非表示コンテンツを切り替えることができます。

• data 属性を使用: コントローラー要素 (ボタンやリンクなど) に属性 data-toggle="modal" を設定し、data-target="#identifier" または href="#identifier" を設定して、切り替える特定のモーダル ボックス (id="identifier" を持つ) を指定します。
• JavaScript 経由: この手法を使用すると、単純な JavaScript 行で id="identifier" を指定したモーダル ボックスを呼び出すことができます。

$('#identifier').modal(options)

例

次の例に示すように、静的なモーダル ウィンドウ インスタンス。

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

結果は次のようになります。

コードの説明:

• モーダルウィンドウでは、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しています。
• 上記のコードをよく見ると、<button> タグ内の data-target="#myModal" が、ページに読み込むモーダルのターゲットであることがわかります。ページ上に複数のモーダルを作成し、モーダルごとに異なるトリガーを作成できます。当然のことながら、複数のモジュールを同時に読み込むことはできませんが、ページ上に複数のモジュールを作成して、異なる時間に読み込むことはできます。
• モーダル ボックスには 2 つの注意点があります。
  1. 1 つ目は .modal で、<div> のコンテンツをモーダル ボックスとして識別するために使用されます。
  2. 2 番目は .fade クラスです。モーダルを切り替えると、コンテンツがフェードインまたはフェードアウトします。
• aria-labeledby="myModalLabel" の場合、この属性はモーダル ボックスのタイトルを参照します。
• 属性 aria-hidden="true" は、トリガーが起動される (関連するボタンをクリックするなど) までモーダル ウィンドウを非表示にしておくために使用されます。
• <div class="modal-header">、modal-header は、モーダルウィンドウの先頭のスタイルを定義するクラスです。
• class="close"、close は、モーダル ウィンドウの閉じるボタンのスタイルを設定するために使用される CSS クラスです。
• data-dismiss="modal" は、カスタム HTML5 データ属性です。ここではモーダルウィンドウを閉じるために使用されます。
• class="modal-body" は、Bootstrap CSS の CSS クラスで、モーダル ウィンドウの本文のスタイルを設定するために使用されます。
• class="modal-footer" は、Bootstrap CSS の CSS クラスで、モーダル ウィンドウの下部のスタイルを設定するために使用されます。
• data-toggle="modal"、HTML5 カスタム データ属性 data-toggle はモーダル ウィンドウを開くために使用されます。

オプション

モーダル ウィンドウ (モーダル ウィンドウ) の外観をカスタマイズするために使用できるオプションがいくつかあり、データ属性または JavaScript を通じて渡されます。次の表に、これらのオプションを示します。

オプション名	タイプ/デフォルト	データ属性名	説明
背景	ブール値または文字列「static」デフォルト: true	データの背景	ユーザーがモーダルの外側をクリックしたときにモーダルを閉じない静的な背景を指定します。
キーボード	ブール値のデフォルト: true	データキーボード	Esc キーを押すとモーダル ボックスが閉じられ、false に設定するとキーは無効になります。
見せる	ブール値のデフォルト: true	データショー	初期化時にモーダルを表示します。
リモート	パスのデフォルト: false	データリモート	jQuery .load メソッドを使用して、モーダルの本体にコンテンツを挿入します。href が有効な URL とともに追加されると、コンテンツがロードされます。次の例に示すように: <a data-toggle="modal" href="remote.html" data-target="#modal">クリックしてください</a>

方法

以下に、modal() で使用できる便利なメソッドをいくつか示します。

方法	説明	例
オプション:.modal(オプション)	コンテンツをモーダル ボックスとしてアクティブ化します。オプションの options オブジェクトを受け入れます。	$('#identifier').modal({ keyboard: false })
トグル: .modal('トグル')	モーダルを手動で切り替えます。	$('#identifier').modal('toggle')
表示: .modal('show')	モーダルを手動で開きます。	$('#identifier').modal('show')
非表示: .modal('非表示')	モーダルを手動で非表示にします。	$('#identifier').modal('hide')

例

次の例は、このメソッドの使用法を示しています。

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">按下 ESC 按钮退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
      
      
    $('#myModal').modal({
      
      
        keyboard: true
    })
});
</script>

結果は次のようになります。

ESC キーを押すだけでモーダル ウィンドウが終了します。

イベント

次の表に、モーダル ボックスで使用されるイベントを示します。これらのイベントは関数のフックとして使用できます。

イベント	説明	例
show.bs.モーダル	show メソッドが呼び出された後に発生します。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
示されている.bs.モーダル	モーダルがユーザーに表示されると発生します (CSS 遷移が完了するまで待機します)。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
非表示.bs.モーダル	Hide インスタンス メソッドが呼び出されたときに発生します。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.モーダル	モーダルがユーザーから完全に非表示になったときに発生します。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

例

次の例は、イベントの使用法を示しています。

<!-- 模态框（Modal） -->
<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">点击关闭按钮检查事件功能。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
      
      
    $('#myModal').modal('hide')
})});
</script>
<script>
$(function() {
      
      
    $('#myModal').on('hide.bs.modal',
    function() {
      
      
        alert('嘿，我听说您喜欢模态框...');
    })
});
</script>

結果は次のようになります。

上の例が示すように、閉じるボタン、非表示イベントをクリックすると、警告メッセージが表示されます。