Bootstrap 是一种流行的前端框架，它提供了很多有用的组件来快速搭建 Web 应用程序。其中，模态框是一种常见的组件，可以让用户与应用程序进行交互。
在使用 Bootstrap 模态框时，有时候需要在用户点击“行动”按钮后关闭模态框。本文将介绍如何实现这个功能，并提供一个示例代码。
实现步骤
要实现在用户点击“行动”按钮后关闭模态框，可以按照以下步骤进行操作：
- 给“行动”按钮添加一个
data-dismiss属性，并设置为modal。例如：
<button type="button" class="btn btn-primary" data-dismiss="modal">行动</button>
- 在 JavaScript 中监听按钮单击事件，并触发模态框的关闭。例如：
$('#myModal').on('click', '.btn-primary', function() {
$('#myModal').modal('hide');
});这里假设模态框的 ID 为 myModal，“行动”按钮的类为 btn-primary。
示例代码
下面是一个完整的示例代码，包含 HTML、CSS 和 JavaScript：
HTML：
-- -------------------- ---- -------
------- ------------- ---------- ------------ ------------------- -------------------------------------
---- ------------ ----- ------------ ------------- ------------- ------------------------------ -------------------
---- ---------------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------- -----------------------------------
--- ------------------- ----------------------------
------
---- -------------------
--------
------
---- ---------------------
------- ------------- ---------- ------------ --------------------------------
------- ------------- ---------- ------------------------
------
---------- --------------- ---
---------- -------------- ---
---------- ------- ---CSS：
-- -------------------- ---- ------- -- ------------ -- ------------- - ----------------- -------- ------ ----- - ------------- - ----------------- -------- -
JavaScript：
$('#myModal').on('click', '.btn-primary', function() {
$('#myModal').modal('hide');
});结论
通过添加 data-dismiss 属性和 JavaScript 监听事件，我们可以快速实现在用户点击“行动”按钮后关闭 Bootstrap 模态框的功能。希望本文能够给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30412