Modal z-index issue. Potential Solution.

[pmsaue0]

I first experienced the modal content displaying beneath the .modal-backdrop scrim in IE7, but I have since seen weird behavior in Chrome.

The problem, in essence, is that .modal and .modal-backdrop are not always siblings with similar attributes. In a recent project I had a deeply nested .modal and there were custom z-indexings elsewhere on the page. Thus, incorrect z-indexing.

I've created a jsFiddle: http://jsfiddle.net/ATeaH/8/ to illustrate the busted and fixed behavior.

Hope this is useful.

[BlackjacketMack]

Fantastic! Thanks so much for posting a solution.

[jasonmadigan]

Have been bitten by this today. Thanks for the explanation!

[Szeremeta]

Many thanks, got caught out by this one too!

[wyaeld]

gracias, left me extremely confused when this happened to me

[demike]

Another solution could be to use InsertAfter to insert the backdrop after the modal.
see: http://jsfiddle.net/ByFvY/14/

This has the positive side effect that the modal doesn't need to be moved out of place +
nesting of modals would be possible

note: the InsertAfter should be done in the plugin.

[tompi]

Thanks a lot! The insertAfter seems to fix it for me.
Modified the Modal.backdrop function(line 803/804 in 2.0.4)

  this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .insertAfter(this.$element)

[mauricioquiros]

Thanks a lot! The insertAfter works for me as in @tompi code.

[mpschr]

Perfect, thanks a lot for resolving this!

[edizaziz-dev]

Thank you Thank you Thank you!

[jdev-d]

Hello guys, I am having the same issue. I already put the piece of script but its still not working for me. I hope you could help. Thanks in advance.

IE 7 problem here: http://www.theeap.com/online-training-tools/online-test.html

[nfang]

Thanks for the explanation and solution. Works like a charm :)

[lookfirst]

@tompi 's fix works. This should get committed asap.

[sterlingstokes]

You saved my bum with this. Thank you!

[silviomoreto]

Thank you! You saved my day too!

[asavin]

Thanks, that helped me too! This issue was reproducible in all browsers, .NET project.

[kerwitz]

Thanks a lot, the .insertAfter fixed it right away.

[pixelnourish]

Yep, also hit by this bug, and this fiddle fixed it for me too. Thank you for your time (so long ago!).

[fat]

We explicitly don't want to move the element around the dom. The solution is really don't nest your modals in your dom.

Just put them at the bottom of the body when you write your markup.

[lookfirst]

It isn't always possible to control where the modals are placed in the DOM so blanket statements like that are kind of short sighted. For example, I have a template system that uses russian doll style of generation. A request for a page first renders the innermost template and then cascades upwards from there by rendering the next template and placing the first template within the body of the next template. If the modal is output by the innermost template, it is very difficult to put it at the bottom of the body. Of course, it can be argued that things should be rendered a different way, but the point here is to just say that it isn't always possible to do what you are suggesting.

[kand]

Yea, why is this issue closed? This is still a problem. It's not always possible to put modals at the body level.

[s-anes]

Really useful! Thanks!

[Wilsonilo]

Thanks a lot!

[dip7ul]

Really useful work on mobile safari ipad

[Gajjar]

Thanks a lot dude, working just fine...!!!!

[naelshawwa]

Why was this issue closed? As some previous posters have indicated it is not always easy to avoid nesting the modal within DOM especially when using any sort of template system or when working with portlets within a portal. Will this be re-considered for a fix?

[smaier]

thanks a lot!

[contrerasjf0]

Thaks a lot! this was help ful