无法使 bootstrap 对话框成为无模式的

Question

我正在尝试使用 Bootstrap 3.2.0 创建一个对话框。我让它们工作正常，除了那些我想要无模式的。我已将 data-backdrop 属性设置为 false，并尝试了一些我在网上找到的建议，例如分离焦点事件：

$(document).off("focusin.bs.modal");

and/or 从 body 标签中删除 modal-open class。

完成这些操作后，您仍然可以在 window 中看到内容，但用户在 Chrome 和 Firefox 中根本无法与之交互，而在 IE 10 中可以在一定程度上进行交互.

是否可以使用 Bootstrap 创建真正的无模式对话框？

Answer 1

是的，可以实现。参见 this functioning demo

在模式 div 上为无模式添加 class:

<div class="modal fade modeless" ...

然后为其添加CSS：

.modeless{
    top:10%;
    left:50%;
    bottom:auto;
    right:auto;
    margin-left:-300px;
}

请注意 margin-left 是居中的。对于宽度超过 768px 的屏幕，bs modal 的默认大小是 600px。您将需要根据您使用的任何大小的模态对其进行调整，如果需要，添加一些媒体查询来覆盖断点可能是个好主意。

HTH-泰德

Can't make bootstrap dialog modeless