无法使bootstrap对话无模式(Can't make bootstrap dialog modeless)

无法使bootstrap对话无模式(Can't make bootstrap dialog modeless)

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

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

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

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

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

I'm trying to create a dialog using Bootstrap 3.2.0. I have them working fine except for those that I want to be modeless. I've set the data-backdrop attribute to false and I've tried some of the suggestions I've found online such as detaching the focus event:

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

and/or removing the modal-open class from the body tag.

After doing these things you can still see the content in the window, but the user cannot interact with it at all in Chrome and Firefox, while they can to some extent in IE 10.

Is it possible to create a truly modeless dialog using Bootstrap?

最满意答案

是的，它可以完成。 看到这个功能演示

在模态div上添加一个无模式的类：

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

然后为它添加CSS：

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

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

HTH -Ted

Yes, it can be accomplished. See this functioning demo

On the modal div add a class for modeless:

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

Then add CSS for it:

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

Note that the margin-left is what is centering it. The default size for the bs modal is 600px for screens over 768px wide. You will need to adjust it for whatever size modal you are using, and it would probably be a good idea to add some media queries to cover breakpoints if need be.

HTH -Ted