bootstrap modal 怎么关闭

首先，我们需要了解一下 Bootstrap Modal 的结构以及如何触发它的显示和隐藏。 Bootstrap Modal 是通过 JavaScript 控制显示和隐藏的，其结构包括一个 id 为 modal 的 div 容器，以及一个包含触发按钮的元素。触发按钮的元素使用 data-target 属性来指定要显示的 Modal 的 id。 以下是一个基本的 Bootstrap Modal 的示例代码： ```html Launch demo modal ``` 上述代码中，触发 Modal 的按钮使用了 data-target 属性来指定要显示的 Modal 的 id，在这里是 "#myModal"。 在 Modal 的结构中，我们可以看到包含了一个关闭按钮，该按钮使用了 data-dismiss 属性来触发 Modal 的关闭。 下面，我们来看一下如何通过代码关闭 Bootstrap Modal。 ### 一、使用 Bootstrap 的 JavaScript 方法 Bootstrap 为 Modal 提供了两个 JavaScript 方法，用于显示和隐藏 Modal。其中，我们可以使用 .modal('hide') 方法来关闭 Modal。 以下是使用 JavaScript 关闭 Modal 的示例代码： ```html Launch demo modal ``` 在上述代码中，我们首先通过 jQuery 获取到了 Modal 对象 $("#myModal")，然后调用了 .modal('hide') 方法来关闭 Modal。 ### 二、手动设置样式 除了使用 Bootstrap 的 JavaScript 方法以外，我们还可以手动修改 Modal 的样式来关闭它。 我们需要手动为 Modal 添加一个样式 "display:none;"，这样就可以隐藏 Modal。 以下是手动关闭 Modal 的示例代码： ```html Launch demo modal ``` 在上述代码中，我们定义了一个名为 closeModal 的函数，当点击 Modal 中的关闭按钮时会调用该函数。 在函数中，我们通过 document.getElementById('myModal') 获取到了 Modal 对象并手动为其设置了样式 "display: none;" 来关闭 Modal。 ### 三、使用 JavaScript 实现手动关闭 除了手动设置样式外，我们也可以通过 JavaScript 动态的添加和删除 Modal 对象来关闭它。 以下是使用 JavaScript 实现手动关闭的示例代码： ```html Launch demo modal ``` 在上述代码中，我们定义了一个名为 closeModal 的函数，当点击 Modal 中的关闭按钮时会调用该函数。 在函数中，我们通过 document.getElementById('myModal') 获取到了 Modal 对象并使用其 parentNode.removeChild 方法从 DOM 中删除了该对象，从而实现了关闭 Modal 的效果。 ### 四、总结 总的来说，关闭 Bootstrap Modal 的方法有很多种，其中包括使用 JavaScript 方法、手动设置样式以及使用 JavaScript 实现手动关闭。 根据具体情况选择不同的方法来关闭 Modal，可以提高代码的优化程度和用户体验，实现更好的效果。同时，我们还需要将代码规范化，使用合适的注释和命名规范，写出易于维护和二次开发的代码。