ブートストラップJavaScriptモーダルボックスを閉じる

Web 開発では、モーダル ボックスは一般的に使用されるインターフェイス要素であり、プロンプト情報の表示やフォームへの入力などに使用できます。 Bootstrap は、モーダル ボックスを含む多くの便利なコンポーネントを提供する、広く使用されているフロントエンド フレームワークです。モーダル ボックスで使用される JavaScript コードは、モーダル ボックスの表示、非表示、閉じるなどの動作を制御できます。この記事では、Bootstrap JavaScript コードを使用してモーダル ボックスを閉じる方法を紹介します。

モーダル ボックスを閉じる方法

Bootstrap には、モーダル ボックスを閉じるための複数の方法が用意されています。

• モーダル ボックスの閉じるボタンをクリックします。
• モーダル ボックスの外側をクリックします;
• JavaScript で API メソッドを呼び出します。

ここでは、3 番目の方法である JavaScript コードを使用してモーダル ボックスを閉じることに焦点を当てます。

API メソッドを使用してモーダル ボックスを閉じる

Bootstrap モーダル ボックスには、開く、閉じる、切り替えるなどの複数の操作をサポートするメソッド modal が用意されています。このうち、モーダルボックスを閉じるメソッドは hide で、具体的な使い方は次のとおりです:

$('#myModal').modal('hide');

'#myModal' はモーダルの ID ですカスタム スタイルを使用する場合は、他のセレクターに置き換えることもできます。

たとえば、コードは次のとおりです。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

これは、閉じるボタンを含む単純なモーダル ボックス構造です。 JavaScript コードを使用してこれをオフにする方法を見てみましょう。

まず、モーダル ボックスの jQuery オブジェクトを取得する必要があります:

const myModal = $('#myModal');

次に、モーダル ボックスを閉じるメソッドを関数にカプセル化できます:

function hideModal() {
  myModal.modal('hide');
}

必要に応じて、モーダル ボックスを閉じるには、この関数を呼び出すだけです。

hideModal();

概要

この記事では、Bootstrap JavaScript コードを使用してモーダル ボックスを閉じる方法を紹介します。 modal メソッドを使用すると、モーダル ボックスの表示、非表示、切り替えなどの動作を JavaScript コードで動的に制御でき、非常に便利です。その後の開発プロセスでは、これらの方法を適切に使用して、実際のニーズに基づいてユーザー エクスペリエンスを最適化できます。

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