Prevent modal background overlay to get darker on each new modal opened

Question

How do I prevent modal's overlay to get darker for each new opened modal?

This fiddle will makes things clear. You will notice the background overlay getting darker for each new modal.

I tried to clear the background of the subsequents modal windows adding a class with these properties:

background: none 
// and
background: transparent
// and
background-color: rgba(0, 0, 0, 0) // reset bg
// and
background-color: rgba(255, 255, 255, 1); // all clear and transparent bg

But none worked at all.

To be clear, I'm replacing Kendo window by Bootstrap modal on my app and this fiddle shows the exactly result I expect(which is working in my current app) but using Kendo.

Answer 1

You can use the following style:

.modal + .modal-backdrop + .modal + .modal-backdrop {display:none}

Example

or initiate the extra modals without a backdrop:

modal.modal({ show:true, backdrop: false });

Example

The css version seems to be best though as it allows you to click opn the backdrop to close the modal where as the js version doesn't

EDIT

If you close the modal and open a new one, the above css fails. This one should work instead

.modal + .modal-backdrop ~ .modal-backdrop {display:none}

Example

Answer 2

This worked for me in chrome:

.modal-open .modal-backdrop.in:nth-child(2) { opacity: .5 }
.modal-backdrop.in { opacity: 0 }

But generally I would suggest not opening a modal in a modal. You'll also want to do something similar for the box-shadow.

http://jsfiddle.net/pjuv6uzx/