JavaScriptモーダルクローズ

JavaScript モーダル閉じる

モーダルは一般的な Web ページのポップアップ ウィンドウで、通常はコンテンツの表示、確認の要求、または情報の収集に使用されます。 JavaScript でモーダルを作成するのは一般的な操作ですが、モーダルを閉じるのはそれほど簡単ではない場合があります。この記事では、JavaScript のモーダルを閉じるための一般的な方法をいくつか紹介します。

1. jQuery を使用する方法

jQuery を使用する場合は、次の方法を使用してモーダルをオフにすることができます:

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

Use modal ("show") を使用してモーダルを表示し、modal("hide") を使用してモーダルを閉じます。このうち #myModal はモーダル セレクターであり、実際の状況に応じて変更する必要があります。

2. Bootstrap の使用方法

Bootstrap を使用する場合は、次のメソッドを使用してモーダルをオフにすることができます:

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

jQuery メソッドと同様、モーダルを表示するには modal("show") を使用し、モーダルを閉じるには modal("hide") を使用します。同様に、#myModal はモーダルのセレクターであり、実際の状況に応じて変更する必要があります。

3. ネイティブ JavaScript を使用する方法

jQuery または Bootstrap を使用したくない場合は、ネイティブ JavaScript を使用してモーダルをオフにすることができます。このメソッドでは、getElementById メソッドを使用してモーダル要素を取得し、style.display を使用してその display 属性を none に設定する必要があります。

以下はサンプル コードです:

// 显示 modal
document.getElementById("myModal").style.display = "block";

// 关闭 modal
document.getElementById("myModal").style.display = "none";

使用 style.display = "block" モーダルを表示するには、style.display = "none"# を使用します# # モーダルを閉じます。同様に、myModal はモーダルの id であり、実際の状況に応じて変更する必要があります。

モーダルに閉じるボタンを追加する

モーダルに閉じるボタンを追加すると、ユーザー エクスペリエンスが向上し、ユーザーがモーダルを閉じるのも簡単になります。コード例:

<!-- 在 modal 中添加关闭按钮 -->
<div class="modal-header">
  <h5 class="modal-title">Modal 标题</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

ご覧のとおり、閉じるボタンがモーダルのヘッダーに追加されます。ここには

data-dismiss="modal" 属性が必要です。ボタンにモーダルを閉じるように指示します。ユーザーが閉じるボタンをクリックすると、hide.bs.modal イベントがトリガーされます。このイベントは次の方法でキャプチャできます:

$('#myModal').on('hide.bs.modal', function (e) {
  // do something...
})

モーダルを閉じるには、次のようにします。

modal("hide") または style.display = "none"、どちらを選択するかは実装によって異なります。

概要

JavaScript でモーダルを閉じるには、jQuery、ブートストラップ、ネイティブ JavaScript の使用など、さまざまな方法があります。また、モーダルに閉じるボタンを追加して、ユーザー エクスペリエンスを向上させることができます。 。どの方法を使用するかは、実装と状況によって異なります。どの方法を選択する場合でも、モーダルが正常に閉じられることを確認する必要があります。そうしないと、ユーザー エクスペリエンスに影響を与える可能性があります。

以上がJavaScriptモーダルクローズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。