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"); });

Usemodal ("show")to display the modal, usemodal("hide")to close the modal. Among them,#myModalis 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, usemodal("show")to show the modal, usemodal("hide")to close the modal. Similarly,#myModalis 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 thegetElementByIdmethod to obtain the modal element, and usingstyle.displayto set itsdisplayattribute tonone.

The following is a sample code:

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

Usestyle.display = "block"to display modal, usestyle.display = "none"to close the modal. Similarly,myModalis theidof 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 标题
  ×  

As you can see, a close button is added to the header of the modal, where thedata-dismiss="modal"attribute is required, which instructs the button to close the modal. . When the user clicks the close button, thehide.bs.modalevent 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 usemodal("hide")orstyle.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!