Bootstrap Modal模态框关闭问题

最新推荐文章于 2022-12-29 17:04:03 发布

原创最新推荐文章于 2022-12-29 17:04:03 发布 · 2.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #jquery

收录于

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在使用Bootstrap模态框时遇到的无法关闭问题，并提供了两种解决方案：一是结合JS代码进行调整，二是检查并正确配置JQuery和Bootstrap的版本。详细列举了Bootstrap4.3.1与JQuery3.2.1、Bootstrap3.3.7与jquery2.1.1的兼容版本。

Bootstrap Modal data-dismiss="modal"无法关闭模态框

说明：在使用boostrap自带模态框时，出现可以打开模态框但是无法关闭的问题。

浏览了许多博客，统计有以下方法：

1. 使用bootstrap 结合 Js代码实现打开关闭【待完善】

2. 版本问题：实现该功能会用到JQuery.js，Jquery和Boostrap版本存在一定的对应关系：

详情可以参考菜鸟驿站关于Bootstrap 3和4的教程中版本的引用。

（1）Bootstrap4.3.1和Jquery3.2.1

Bootstrap 4说明文档

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

（2）Bootstrap3.3.7和jquery2.1.1

Bootstrap3说明文档

	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

备注：它们间顺序存在一定影响，有兴趣可以尝试。