如果您正在使用从getboostrap站点本身复制并粘贴到html生成的选择器中，请确保您删除了注释'<!——/。模态——>”。Bootstrap会感到困惑，认为注释是第二个模态元素。它为这个“第二个”元素创建了另一个背景。

在动作按钮中插入:

data-backdrop="false"

and

data-dismiss="modal" 

例子:

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

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

如果你输入这个data-attr， .modal- background将不会出现。 关于它的文档在这个链接:http://getbootstrap.com/javascript/#modals-usage

我也遇到过类似的问题:在我的模式窗口中，我有两个按钮，“取消”和“确定”。最初，这两个按钮都将通过调用$('#myModal').modal('hide')来关闭模式窗口(前面有"OK"执行一些代码)，场景如下:

打开模态窗口 做一些操作，然后点击“确定”是否验证他们并关闭模式 再次打开模态并通过点击“取消”来取消 重新打开模式，再次点击“取消”==>背景不再可访问!

好吧，我旁边的同事帮了我大忙:不用调用$('#myModal').modal('hide')，而是给你的按钮赋予data-dismiss="modal"属性，并在你的"Submit"按钮中添加一个"click"事件。在我的问题中，按钮的HTML(好吧，TWIG)代码是:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

在我的JavaScript代码，我有:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

而没有“点击”事件归因于“取消”按钮。模态现在正确关闭，让我再次使用“正常”页面。实际上，似乎data-dismiss="modal"应该是指示按钮(或任何DOM元素)应该关闭Bootstrap模式的唯一方法。modal('hide')方法的行为似乎不太可控。

希望这能有所帮助!

从https://github.com/twbs/bootstrap/issues/19385

Modal的显示/隐藏方法是异步的。因此，代码如下: foo.modal(“隐藏”);bar.modal(“秀”);是无效的。你需要等待 实际完成的显示/隐藏(通过侦听 显示/隐藏事件;看到 http://getbootstrap.com/javascript/#modals-events) 再次显示或隐藏方法。

我有这个问题时，我打开相同的模式两次太快，所以一个简单的解决方法是检查它是否已经显示，然后不显示它再次:

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}

确保在执行AJAX请求时没有替换包含实际模态窗口的容器，因为Bootstrap在尝试关闭它时将无法找到对它的引用。在Ajax完整处理程序中删除模态，然后替换数据。

如果这不起作用，你可以通过以下方法强迫它消失:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

确保对$.modal()的初始调用以应用模态行为没有传入比预期更多的元素。如果发生这种情况，它将为集合中的每个元素创建一个带有背景元素的模态实例。因此，它可能看起来像是背景被留下了，而实际上你正在看的是其中一个复制品。

在我的例子中，我试图用这样的代码创建模式内容:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

在这里，结束</div>标记之后的HTML注释意味着myModal实际上是两个元素的jQuery集合——div和注释。他们都尽职地变成情态动词，每个都有自己的背景元素。当然，由注释组成的模态在背景之外是不可见的，所以当我关闭真正的模态(div)时，它看起来就像背景被留下了一样。