Unable to make download dialog
I am trying to create a dialog using Bootstrap 3.2.0. I work them perfectly apart from the ones I want to be modeless. I set the attribute data-backdrop
to false and I tried some of the suggestions I found on the internet, such as disabling the focus event:
$(document).off("focusin.bs.modal");
and / or removing the class modal-open
from the tag body
.
After following these steps, 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?
source to share
Yes, it can be done. See this live demo
In 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 margin-left
- this is what centers it. The default size for bs bridge is 600px for 768px wide screens. You will need to adjust it for whatever modal size you are using, and it would probably be nice to add some media queries to cover breakpoints if needed.
HTH -Ted
source to share