ブートストラップ学習におけるモーダル ボックスの使用の簡単な分析

この記事では、Bootstrap のモーダル ボックスについて理解し、モーダル ボックスのサイズを変更する方法とモーダル ボックスにリモート コンテンツを読み込む方法を紹介します。 ！

このチュートリアルでは、非常に便利な Bootstrap jQuery プラグイン - Modal box について説明します。

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

これをよりよく理解するために、Bootstrap モーダル ボックスのさまざまなコンポーネントを見てみましょう。 [関連する推奨事項: "bootstrap チュートリアル "]

Bootstrap モーダル ボックス は、主にヘッダー、本文、ページ フッターの 3 つの部分に分かれています。それぞれの部分に意味があるので、正しく使いましょう。これらについては後で説明します。 Bootstrap モーダルの最も興味深い点は何ですか?これを使用するために JavaScript コードを記述する必要はありません。すべてのコードとスタイルはブートストラップによって事前定義されています。必要なのは、適切なタグと属性を使用してトリガーすることだけです。

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

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

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

<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 id="Modal-nbsp-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3 id="Modal-nbsp-Body">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」閉じるボタンなどの他の要素をモーダルに追加するために使用されます。これらの要素には、どの要素を非表示にするかをブートストラップに指示する data-dismiss 属性も必要です。

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

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

モーダル ボックスのサイズを変更する

Bootstrap モーダル ボックスは応答性が高く、柔軟性があると前述しました。このセクションでは、サイズを変更する方法を見ていきます。

Bootstrap 3.3.7 のモーダル ボックスには、大と小の 2 つの新しいスタイルがあります。より大きなモーダル ボックスを取得するには、修飾子クラス modal-lg を divmodal-dialogdiv に追加し、より小さなモーダル ボックスを取得するには、modal-sm を追加します。

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

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

$('#basicModal').modal(options);

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

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

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

• backdrop：这可以是true或static。这定义你是否希望用户能够通过单击背景来关闭模态。
• keyboard：如果设置为true则模态框将通过ESC键关闭。
• show：用于打开和关闭模态框。它可以是true或false。
• remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上がブートストラップ学習におけるモーダル ボックスの使用の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。