How to Close a Modal in JavaScript

Use the close API that belongs to the modal you are using. In Bootstrap 5, call hide() on the modal instance or add data-bs-dismiss="modal" to a close button. For a native HTML <dialog>, call its close() method. These APIs remove the open modal state; they do not navigate away from the page.

The original example used Bootstrap 3 and jQuery. That syntax is still relevant when maintaining an older site, but data-dismiss and $('#myModal').modal('hide') are not the current Bootstrap 5 API. The examples below use Bootstrap 5.3.8 and the native dialog API.

Close a Bootstrap 5 Modal

Bootstrap 5 exposes a modal instance through bootstrap.Modal.getOrCreateInstance(). Call hide() after obtaining the instance. A declarative close button is simpler when the button is inside the modal.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="myModalLabel">Modal title</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">The modal content goes here.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The data-bs-dismiss="modal" attribute closes the Bootstrap modal and lets Bootstrap restore focus to the element that opened it. Load Bootstrap’s JavaScript bundle, which includes Popper, before relying on the data API.

To close the same modal from another click handler, use its instance:

const modalElement = document.querySelector('#myModal');
const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

document.querySelector('#saveButton').addEventListener('click', () => {
  modal.hide();
});

Do not remove the modal element immediately after calling hide(). Bootstrap hides modals asynchronously while the CSS transition runs. If code must run after it is fully hidden, listen for hidden.bs.modal:

modalElement.addEventListener('hidden.bs.modal', () => {
  console.log('Modal is closed');
});

The old Bootstrap 3/jQuery equivalent is $('#myModal').modal('hide'), and its close attribute is data-dismiss="modal". Keep that form only when the page actually loads Bootstrap 3; mixing it with Bootstrap 5 will not close the modal.

Close a Native HTML Dialog

If you do not need Bootstrap, a native <dialog> provides modal behavior without a third-party library. Open it with showModal() and close it with close():

<dialog id="settingsDialog" aria-labelledby="settingsTitle">
  <h2 id="settingsTitle">Settings</h2>
  <p>Choose a setting, then close the dialog.</p>
  <button id="closeDialog" type="button">Close</button>
</dialog>
<button id="openDialog" type="button">Open settings</button>

<script>
  const dialog = document.querySelector('#settingsDialog');
  document.querySelector('#openDialog').addEventListener('click', () => dialog.showModal());
  document.querySelector('#closeDialog').addEventListener('click', () => dialog.close());
</script>

Calling close() (the .close() method) sets the dialog’s open state to false and dispatches a close event. It does not replace Bootstrap’s hide() because the two components manage different DOM state. A dialog opened with showModal() can also close when the user presses Escape; handle the cancel event if that behavior needs to be prevented.

Common Boundaries

If modal.hide() appears to do nothing, check that the selector found the modal element, Bootstrap’s JavaScript loaded, and the instance was created from the current Bootstrap version. If a modal is already transitioning, wait for hidden.bs.modal before starting another operation. For a native dialog, check dialog.open before calling close() and use showModal() rather than show() when a backdrop and modal focus behavior are required.

Both approaches close only the UI component. They do not close a browser tab, cancel an unrelated promise, or undo application state. Put cleanup in the appropriate hidden.bs.modal or close event handler.

See the original Bootstrap demo

The preserved screenshots show the original Bootstrap 3 demonstration. They illustrate the visible close result, but their markup is not evidence that the legacy API is current.