bootstrap 模式在更新到 bootstrap 3.3.0 后停止运行

Question

难倒。

我有一个标准模式（与引导程序演示页面中所做的完全一样），使用下面的按钮调用 -

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
           Login or register
</button>

和模态标记

<div class="modal fade" style="display:none;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Login or register</h4>
            </div>
            <div class="modal-body">
                ...code....
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

直到今天晚上，这一直没有问题。我将 VS 2013 express 更新到社区，将引导程序更新到最新版本（在我的 VS 2013 上显示 3.3.0）就是这样。我比较了我的 .cshtml 文件，那里没有任何变化。

现在当我点击登录按钮时，模态弹出但整个页面变灰，我无法编辑表单中的输入字段。当我点击模态的任何地方时，它就会关闭。

不知道从哪里开始调试这个……有人有什么想法吗？

（jquery版本为2.1.1，bootstrap 3.3.0）

谢谢你的帮助

更新

当我从 bootstrap 3.2.0 移动到 3.3.0 时，这似乎是要做的事情。我将 bootstrap.js 和 bootstrap.min.js 恢复为 3.2.0，模态再次运行。我将按原样保留这个问题——也许我可以通过 nuget 在 vs 2013 上下载的方式有一个修复，这个问题就消失了。

Answer 1

我认为这是 FADE 的问题。我改变这个：

<div class="modal fade" id=... >

到

<div class="modal" id=... >

（去除褪色）

这不是最理想的解决方案，但它确实有效。

Answer 2

只需将

z-index: 1040;

用于课程

.modal-dialog

，它应该再次正常工作。您可以编辑 bootstrap 的 css 文件，定义您自己的 css 文件，或将其作为内联样式放入您的模态对话框 div。如果你使用 LESS/SASS 资源，那就更好了。

附言至少它在没有进一步测试或分析的情况下对我有用。

Answer 3

几分钟前我刚刚遇到了同样的问题......最后我发现这个问题与我写的一些自定义CSS代码有关，这些代码覆盖了Bootstrap的

z-index

和

.modal

类.我刚刚删除了那些 CSS 类的覆盖，现在一切正常。

你可能在 z-index 上用自定义代码做了类似的事情

Answer 4

查看重要更改列表

here - 迁移到 Bootstrap 3.0

，检查并删除所有 depricated 类并将它们替换为等效类。

Answer 5

http://getbootstrap.com/javascript/#modals-options

Remote：此选项自 v3.3.0 起已弃用，将在 v4 中删除

Answer 6

总结：

升级 Bootstrap 版本时，确保同时升级 js 和 css 文件. 即使在次要版本之间升级。

很容易忘记升级 Bootstrap css。

背景：

我从 Bootstrap v3.3.6 升级到 Bootstrap v3.4.1 我升级了 js，大多数事情都保持正常。 但有一件事不能正常工作是

模态弹出窗口

。 如果我从模态 div 中删除“淡入淡出”类，那么模态会有点工作，但仍然存在问题。 浅灰色的半透明背景变成了深灰色的非透明背景。 一旦我意识到我正在使用 Bootstrap v3.3.6 js 和 Bootstrap v3.4.1 css，我就将 css 升级到正确的版本，如果解决了我的问题。 我不必使用手动删除所有fade类的临时修复。

调试：

如果您不确定您的 Bootstrap js 和 Boostrap css 之间是否存在版本不匹配，您可以右键单击检查页面，转到“源”选项卡，然后在左侧栏中查找您的 Bootstrap 文件。 如果文件未使用版本信息命名（bootstrap_3.4.1.js 等），则单击该文件以在中央窗口中打开它，Bootstrap 版本信息通常是文件的前几行。 js 和 css 文件都一样。 希望有帮助。