javascript modal close

JavaScript Modal Close

Modal is a common web page pop-up window, usually used to display content, ask for confirmation, or collect information. Creating a modal in JavaScript is a common operation, but closing the modal may not be that easy. This article will introduce several common methods to achieve JavaScript Modal closing.

1. Method of using jQuery

If you use jQuery, you can use the following method to turn off modal:

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

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

Use modal ("show") to display the modal, use modal("hide") to close the modal. Among them, #myModal is your modal selector and needs to be changed according to your actual situation.

2. How to use Bootstrap

If you use Bootstrap, you can use the following method to turn off modal:

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

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

Similar to the jQuery method, use modal("show") to show the modal, use modal("hide") to close the modal. Similarly, #myModal is the selector of your modal and needs to be changed according to your actual situation.

3. Method using native JavaScript

If you don’t want to use jQuery or Bootstrap, you can use native JavaScript to turn off modal. This method requires using the getElementById method to obtain the modal element, and using style.display to set its display attribute to none.

The following is a sample code:

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

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

Use style.display = "block" to display modal, use style.display = "none" to close the modal. Similarly, myModal is the id of your modal, which needs to be changed according to your actual situation.

4. Add a close button in the modal

Adding a close button in the modal can provide a better user experience and also make it easier for users to close the modal. Here is an example Code:

<!-- 在 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>

As you can see, a close button is added to the header of the modal, where the data-dismiss="modal" attribute is required, which instructs the button to close the modal. . When the user clicks the close button, the hide.bs.modal event will be triggered. This event can be captured in the following ways:

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

To close the modal, you can use modal("hide") or style.display = "none", which one you choose depends on your implementation.

Summary

There are many ways to close a modal in JavaScript, such as using jQuery, Bootstrap or native JavaScript, and a close button can be added to the modal to provide a better user experience. Which method to use depends on your implementation and circumstances. No matter which method you choose, you need to ensure that the modal can be closed successfully, otherwise it may affect the user experience.

The above is the detailed content of javascript modal close. For more information, please follow other related articles on the PHP Chinese website!