Home > Web Front-end > Front-end Q&A > bootstrap javascript close modal box

bootstrap javascript close modal box

PHPz
Release: 2023-05-09 11:40:37
Original
1670 people have browsed it

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');
Copy after login

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>
Copy after login

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');
Copy after login

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

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

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

hideModal();
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template