HOWTO · JavaScript
如何使用 JavaScript 关闭模态框
了解如何使用 JavaScript 关闭 Bootstrap 模态框或原生 HTML 对话框，包括特定版本的 API 和常见边界情况。
本页内容
请根据所使用的模态组件调用相应的关闭 API。在 Bootstrap 5 中，可以在模态实例上调用 hide()，或将 data-bs-dismiss="modal" 添加到关闭按钮上。对于原生 HTML <dialog>，请调用它的 close() 方法。这些 API 会移除模态的打开状态，但不会离开当前页面。
原始示例使用 Bootstrap 3 和 jQuery。维护旧网站时，这种语法仍然有用，但 data-dismiss 和 $('#myModal').modal('hide') 并不是当前 Bootstrap 5 的 API。下面的示例使用 Bootstrap 5.3.8 和原生对话框 API。
关闭 Bootstrap 5 模态框
Bootstrap 5 通过 bootstrap.Modal.getOrCreateInstance() 提供模态实例。获取实例后调用 hide() 即可关闭它。如果关闭按钮位于模态内部，使用声明式按钮会更简单。
<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>
data-bs-dismiss="modal" 属性会关闭 Bootstrap 模态框，并让 Bootstrap 将焦点恢复到打开它的元素上。依赖数据 API 前，请先加载包含 Popper 的 Bootstrap JavaScript bundle。
如果要在另一个点击处理程序中关闭同一个模态框，请使用它的实例：
const modalElement = document.querySelector('#myModal');
const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
document.querySelector('#saveButton').addEventListener('click', () => {
modal.hide();
});
调用 hide() 后不要立即移除模态元素。Bootstrap 会在 CSS 过渡运行时异步隐藏模态框。如果代码必须在它完全隐藏后运行，请监听 hidden.bs.modal：
modalElement.addEventListener('hidden.bs.modal', () => {
console.log('Modal is closed');
});
旧版 Bootstrap 3/jQuery 的等价写法是 $('#myModal').modal('hide')，关闭属性是 data-dismiss="modal"。只有在页面确实加载 Bootstrap 3 时才应使用这种写法；与 Bootstrap 5 混用不会关闭模态框。
关闭原生 HTML 对话框
如果不需要 Bootstrap，原生 <dialog> 无需第三方库即可提供模态行为。使用 showModal() 打开它，并使用 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>
调用 close()（即 .close() 方法）会将对话框的 open 状态设为 false，并分发 close 事件。它不能替代 Bootstrap 的 hide()，因为两个组件管理不同的 DOM 状态。通过 showModal() 打开的对话框也可以在用户按下 Escape 时关闭；如果需要阻止这种行为，请处理 cancel 事件。
常见边界情况
如果 modal.hide() 看起来没有作用，请检查选择器是否找到了模态元素、Bootstrap JavaScript 是否已加载，以及实例是否由当前 Bootstrap 版本创建。如果模态框正在过渡，请等待 hidden.bs.modal 后再开始另一次操作。对于原生对话框，请在调用 close() 前检查 dialog.open；需要背景遮罩和模态焦点行为时，请使用 showModal() 而不是 show()。
这两种方式都只会关闭 UI 组件。它们不会关闭浏览器标签页、取消无关的 promise，也不会撤销应用状态。请将清理代码放在相应的 hidden.bs.modal 或 close 事件处理程序中。
保留的截图展示了原始 Bootstrap 3 演示。它们说明了可见的关闭结果，但其中的标记不能证明旧 API 仍是当前 API。
