ブートストラップモーダルボックスは何に使用されますか?-ブートストラップのチュートリアル-php.cn

ブートストラップモーダルボックスは何に使用されますか?

青灯夜游

リリース： 2020-11-12 11:39:32

オリジナル

2617 人が閲覧しました

ブートストラップモーダルボックスを使用すると、モーダルウィンドウを作成してユーザーエクスペリエンスを強化したり、ユーザーにとって実用的な機能を追加したりできます。警告ウィンドウ、ビデオ、画像、利用規約、さらにはソーシャルメディアウィジェットをウェブサイトを待ってください。モーダルの目的は、別のソースからのコンテンツを表示し、親フォームから離れることなく情報と対話を提供することです。

ブートストラップモーダルボックスは何に使用されますか?

Bootstrap モーダルボックス (Modal) は、親フォームを覆う子フォームである軽量の多目的 JavaScript ポップアップウィンドウです。通常、その目的は、親フォームから離れることなく、何らかのインタラクションを伴う別のソースからのコンテンツを表示することです。子フォームは、情報やインタラクションなどを提供できます。 [関連する推奨事項: "bootstrap ビデオチュートリアル "]

Bootstrap モーダルボックス (Modal) はカスタマイズ可能で応答性が高く、Web サイト上に警告ウィンドウ、ビデオ、画像を表示するために使用できます。。 Bootstrap で構築された Web サイトでは、モーダルを使用して利用規約 (登録プロセスの一部として)、ビデオ、さらにはソーシャルメディアウィジェットを表示できます。

Bootstrap モーダルボックスを使用すると、モーダルウィンドウを作成してユーザーエクスペリエンスを強化したり、ユーザーに実用的な機能を追加したりできます。ポップオーバーとツールチップをモーダルで使用できます。

Bootstrap モーダルボックスは、主にヘッダー、ボディ、フッターの 3 つの部分に分かれています。

デフォルトのモーダルボックス

デフォルトのモーダルボックスは次のとおりです:

ブートストラップモーダルボックスは何に使用されますか?

モーダルボックスをトリガーするには、リンクまたはボタンを追加する必要があります。要素をトリガーするタグは次のようになります。

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

ログイン後にコピー

link 要素には、data-toggle と data-target という 2 つのカスタムデータ属性があることに注意してください。トグルはブートストラップに何をすべきかを指示し、ターゲットはブートストラップにどの要素を開くかを指示します。そのため、そのようなリンクをクリックすると、ID が「basicModal」のモーダルボックスが表示されます。

次に、モーダルボックスの定義に必要なコードを見てみましょう:

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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 title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </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>
  </div>
</div>

ログイン後にコピー

モーダルボックスの親 div は、上記のトリガー要素で使用されているのと同じ ID を持つ必要があります。この場合、それは id="basicModal" です。

注: 親モーダルボックス要素のカスタム属性 aria-labelledby および aria-hidden により、アクセス可能になります。 Web サイトを誰でもアクセスできるようにすることをお勧めします。そのため、モーダルの通常の機能に悪影響を及ぼさないこれらの属性を使用する必要があります。

モーダルボックスの HTML コードでは、親モーダルボックス div 内にネストされたカプセル化 div が確認できます。この div のクラス modal-content は、モーダルのコンテンツを探す場所を bootstrap.js に指示します。この div 内に、前述の 3 つの部分 (ヘッダー、本文、フッター) を配置する必要があります。

モーダルボックスヘッダーは、名前が示すように、タイトルや「x」閉じるボタンなどの他の要素をモーダルに追加するために使用されます。これらの要素には、Bootstrap にどの要素を非表示にするかを指示する data-dismiss 属性も必要です。

次に、モーダルボックスのテキストを見てみましょう。これは、埋め込み YouTube ビデオ、画像、その他のコンテンツなど、あらゆる種類のデータを追加できるオープンキャンバスと考えてください。

最後に、モーダルボックスのフッターを見てみましょう。この領域はデフォルトで右揃えになります。この領域には、「保存」「閉じる」「同意する」などの操作ボタンを配置できます。これらのボタンは、「モーダルボックス」が示す必要のある動作に関連付けられています。

これで最初のモーダルが完成しました。デモページ (https://codepen.io/SitePoint/pen/KkHyw) で確認できます。

jQuery を使用してモーダルボックスをアクティブにする

モーダルボックスは jQuery プラグインなので、jQuery を使用して制御したい場合は、モーダルボックスでは、モーダルのセレクターで .modal() メソッドを呼び出す必要があります。例:

$(&#39;#basicModal&#39;).modal(options);

ログイン後にコピー

ここでの「オプション」は、カスタム動作に渡すことができる JavaScript オブジェクトです。例:

var options = {
    "backdrop" : "static"
}

ログイン後にコピー

利用可能なオプションは次のとおりです:

Backdrop: これは true または静的です。これは、ユーザーが背景をクリックしてモーダルを閉じられるようにするかどうかを定義します。
keyboard: true に設定すると、モーダルボックスは ESC キーで閉じられます。
show: モーダルボックスの開閉に使用されます。それは真実でも偽でも構いません。
リモート: これは最も優れたオプションの 1 つです。 jQueryのload()メソッドを使用してリモートコンテンツをロードするために使用できます。このオプションでは外部ページを指定する必要があります。デフォルト設定は false です。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。！

以上がブートストラップモーダルボックスは何に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。