引导模式冻结页面答案

【问题标题】：Bootstrap modal freezes page引导模式冻结页面
【发布时间】：2014-12-04 07:57:11
【问题描述】：

我已经在网上搜索了这个问题的答案，这个问题与我自己的问题最接近。 Bootstrap Modal popping up but has a "tinted" page and can't interact

我正在使用引导程序创建一个管理页面，并且我在其中使用模式。样式是使用 Bootswatch 主题完成的。使用某些主题时，打开模式，模式出现在有色页面中，一切都冻结了。我必须刷新页面才能再次摆脱它。

我试图将模式移动到页面底部，就在关闭之前 </body>
标签。没有任何效果！

奇怪的是，使用“基本”引导 css，它有同样的问题。有一些 Bootswatch 主题可以正常工作，而其他一些主题则存在这个问题。

我在 jsFiddle 中制作了示例：http://jsfiddle.net/qyo53dxh/ 这是 bootswatch 的“Paper”主题。使用即“United”主题时，它确实可以正常工作。

发生了什么事？

【问题讨论】：

如果没有目标代码示例，很难隔离特定问题，一个工作小提琴向我们展示的很少 - 因为它不允许识别问题。选择一个无效的主题，提供复制它所需的最少代码，并可能提供一个示例。没有它，它可能是任何东西：S

标签： html css twitter-bootstrap modal-dialog

【解决方案1】：

在您的小提琴中，您正在导入 bootstrap.css 和 bootstrap.min.css？

请删除 bootstrap.css

一切都很好。

<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Sluiten</span>
                </button>
                <h4 class="modal-title">Wachtwoord resetten</h4>
            </div>
            <div class="modal-body">
                <p>Typ uw email adres</p>
                <input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
                <button type="button" class="btn btn-custom">Herstellen</button>
            </div>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

这是工作小提琴 http://jsfiddle.net/qyo53dxh/1/

【讨论】：