Can't make bootstrap dialog modeless

Question

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?

Yes, that example demonstrates the problem exactly. In Chrome and Firefox, you can't click on the button again once the dialog is open. But in IE 10 you can. — ericweist

Ted Ted · Accepted Answer · 2015-04-29T13:51:52

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

Can't make bootstrap dialog modeless

1 Answers