bootstrap javascript close modal box

In Web development, the modal box is a commonly used interface element. It can be used to display prompt information, fill in forms, etc. Bootstrap is a widely used front-end framework that provides many convenient components, including modal boxes. The JavaScript code used with the modal box can control the display, hiding, closing and other behaviors of the modal box. This article will introduce how to use Bootstrap JavaScript code to close the modal box.

Methods to close the modal box

Bootstrap provides multiple ways to close the modal box:

• Click the close button in the modal box;
• Click outside the modal box;
• Call the API method in JavaScript.

Here we focus on the third way, which is to close the modal box through JavaScript code.

Use API method to close the modal box

Bootstrap modal box provides a method modal, which supports multiple operations, such as opening, closing, switching, etc. Among them, the method to close the modal box is hide. The specific usage is as follows:

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

where '#myModal' is the id of the modal box. If you use is a custom style and can also be replaced with other selectors.

For example, the code is as follows:

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

This is a simple modal box structure that includes a close button. Let's take a look at how to turn it off using JavaScript code.

First, we need to get the jQuery object of the modal box:

const myModal = $('#myModal');

Then, we can encapsulate a method of closing the modal box into a function:

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

When needed To close the modal box, you only need to call this function:

hideModal();

Summary

This article introduces how to close the modal box with Bootstrap JavaScript code. Through the modal method, we can dynamically control the display, hiding, switching and other behaviors of the modal box in JavaScript code, which is very convenient. In the subsequent development process, we can appropriately use these methods to optimize user experience based on actual needs.

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