twitter-bootstrap-3 - 无法使引导对话框成为无模式的

Question

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

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

和/或从 body 标签中删除 modal-open 类。

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

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

Answer 1

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

在模态 div 上为无模式添加一个类:

<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-泰德