Modal blocking other elements in the page

[lijanele]

Problem: If there are more than one Bootstrap Modal on one page - it can block other elements( a button or "x" close button) on the page or in modal's window making them not clickable, changing z-index does not help.

Solution: add to .modal { display:none; } - no need to modify js

Has anyone tried? or had the same issue?

[fat]

I think you'd be better off asking for help in the mailing list. thanks!

[lijanele]

where?

p.s. i was not asking for help, i was suggesting a solution, bc modal's z-index can cause overlap issues

[purwandi]

@PixelBeets you can read this https://github.com/twitter/bootstrap/blob/master/README.md

[orneryd]

Found a fix for this for my issue. I need multiple modal windows, however the contents are dynamically created within the modal window and if i put in "Display:none" to the style then the contents started flipping out and not displaying properly

I modified the boostrap.css .modal section to remove the z-index and re-added the z-index as a negative to .modal.fade and added the z-index to the modal.fade.in as a positive. example after fix:

.modal {
position: fixed;
top: 50%;
left: 50%;
width: 800px;
margin: -250px 0 0 -400px;
overflow: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}

.modal.fade {
z-index: -1050;
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
z-index: 1050;
top: 50%;
}

[lijanele]

that sounds like a good one too, i will try, although my solution posted above has been working fine cross-browser/device so far ok... :)

[orneryd]

yeah your solution would have worked fine for me if my jhtmlarea didn't flip out with the display:none set in the style tag :(

[Ken-Albert]

Thank you, this helped a lot!!!
I was really getting frustrated with this thing; only to realize the solution is one line of code!

[stevendoll]

Thanks timothyswt your z-index change worked perfectly. I spent hours trying to understand the strange behavior, and only a few minutes ago realized that the links were behaving strangely under where the modal appears. Your answer provided a real relief.

[cvrebert]

Out of the box, Bootstrap doesn't support showing multiple modals at once.
Per http://getbootstrap.com/javascript/#modals :

Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

For such functionality, consider a third-party plugin such as https://github.com/jschr/bootstrap-modal/