Bootstrap 3.3.7自定义模态框按钮无法关闭问题求助

针对你遇到的问题，我来一步步帮你排查和解决：

一、模态框触发方式是否正确？ #

你用<li><a href="#modal">Contact</a></li>触发模态框的方式不正确。Bootstrap 3的模态框需要通过data-toggle="modal"属性配合锚点或data-target来触发，否则它只是单纯的锚点跳转，不会唤起模态框。正确的写法应该是：

<li><a href="#modal" data-toggle="modal">Contact</a></li>

或者用data-target的写法：

<li><a data-toggle="modal" data-target="#modal">Contact</a></li>

二、为什么Close按钮无法关闭模态框？ #

看你代码里的Close按钮：

<button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>

这里有两个关键错误：

1. 一个HTML元素不能同时存在多个class属性，浏览器只会识别第一个class属性，后面的会被忽略，导致data-dismiss="modal"这个Bootstrap关闭指令没有被正确识别。
2. modal类是给模态框最外层容器用的，按钮完全不需要这个类。

修正后的正确写法：

<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>

三、为什么×按钮可以关闭窗口？ #

你的×按钮代码是：

<a href="#" class="modal__close">&times;</a>

虽然它没有Bootstrap默认的data-dismiss="modal"属性，但大概率是你自定义的.modal__close类绑定了JavaScript点击事件（比如通过$("#modal").modal("hide")来手动关闭模态框），或者你的自定义样式/JS里有针对这个类的关闭逻辑，所以点击它能正常关闭窗口。

另外补充一点：Bootstrap 3的模态框建议尽量使用官方规范的类名（比如modal-dialog、modal-content，你用的是modal__dialog、modal__content这类自定义命名），自定义类如果没有正确对应Bootstrap的JS钩子，可能会引发一些隐性问题，建议尽量遵循官方结构规范，减少不必要的冲突。

内容的提问来源于stack exchange，提问作者user1532468