ブートストラップモーダルボックスの実行方法

ブートストラップを使用してモーダルボックスを作成する方法は？適切なHTML構造を備えたモーダルボックスを作成します。モーダル機能を有効にするために、ブートストラップとjQueryライブラリが含まれています。 JavaScriptまたはjQueryコードを使用して、モーダルボックスを表示または非表示にします。

ブートストラップを使用してモーダルボックスを作成する方法

導入

Bootstrapは、ページをリロードせずに情報、フォーム、またはその他のコンテンツをポップアップできるインタラクティブモーダルボックスを作成する簡単なAPIを提供します。

モーダルボックスを作成します

1. 基本的なHTMLを追加：

 <code class="html"><div class="modal" id="myModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 id="模态框标题">模态框标题</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button> </div> <div class="modal-body">模态框内容... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div></code>

2. ブートストラップとjQueryが含まれています：

HTMLページにBootstrapとjQueryライブラリを含めることを確認してください。

 <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script></code>

モーダルボックスをオンとオフにします

JavaScriptまたはjQueryコードを使用して、モーダルボックスを表示または非表示にします。

モーダルボックスを表示：

 <code class="javascript">$('#myModal').modal('show');</code>

モーダルボックスを非表示にする：

 <code class="javascript">$('#myModal').modal('hide');</code>

その他のオプション

ブートストラップモーダルボックスは、次のような他のさまざまなオプションも提供します。

• キーボードイベント：キーボードショートカットを設定して、モーダルボックスをオンとオフにします。
• アニメーション：モーダルボックスのアニメーション効果を有効または無効にします。
• フォーカス：モーダルボックスが開かれたときのキーボードフォーカスの動作を制御します。
• リモートコンテンツの読み込み：モーダルボックスのコンテンツをリモートURLからロードします。

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