Modal z-index issue. Potential Solution. #3217

Closed
pmsaue0 opened this Issue Apr 24, 2012 · 27 comments

Comments

Projects
None yet
@pmsaue0

pmsaue0 commented Apr 24, 2012

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

This comment has been minimized.

Show comment Hide comment
@BlackjacketMack

BlackjacketMack May 9, 2012

Fantastic! Thanks so much for posting a solution.

Fantastic! Thanks so much for posting a solution.

@jasonmadigan

This comment has been minimized.

Show comment Hide comment
@jasonmadigan

jasonmadigan May 16, 2012

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

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

@Szeremeta

This comment has been minimized.

Show comment Hide comment
@Szeremeta

Szeremeta May 21, 2012

Many thanks, got caught out by this one too!

Many thanks, got caught out by this one too!

@wyaeld

This comment has been minimized.

Show comment Hide comment
@wyaeld

wyaeld May 30, 2012

gracias, left me extremely confused when this happened to me

wyaeld commented May 30, 2012

gracias, left me extremely confused when this happened to me

@demike

This comment has been minimized.

Show comment Hide comment
@demike

demike May 30, 2012

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.

demike commented May 30, 2012

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

This comment has been minimized.

Show comment Hide comment
@tompi

tompi Jun 4, 2012

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)

tompi commented Jun 4, 2012

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

This comment has been minimized.

Show comment Hide comment
@mauricioquiros

mauricioquiros Jun 9, 2012

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

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

@mpschr

This comment has been minimized.

Show comment Hide comment
@mpschr

mpschr Jun 17, 2012

Perfect, thanks a lot for resolving this!

mpschr commented Jun 17, 2012

Perfect, thanks a lot for resolving this!

@FIR55TORM

This comment has been minimized.

Show comment Hide comment
@FIR55TORM

FIR55TORM Jun 26, 2012

Thank you Thank you Thank you!

Thank you Thank you Thank you!

@jdev-d

This comment has been minimized.

Show comment Hide comment
@jdev-d

jdev-d Jun 28, 2012

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

jdev-d commented Jun 28, 2012

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

This comment has been minimized.

Show comment Hide comment
@nfang

nfang Jun 29, 2012

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

nfang commented Jun 29, 2012

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

@lookfirst

This comment has been minimized.

Show comment Hide comment
@lookfirst

lookfirst Jul 14, 2012

Contributor

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

Contributor

lookfirst commented Jul 14, 2012

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

@sterlingstokes

This comment has been minimized.

Show comment Hide comment
@sterlingstokes

sterlingstokes Aug 29, 2012

You saved my bum with this. Thank you!

You saved my bum with this. Thank you!

@silviomoreto

This comment has been minimized.

Show comment Hide comment
@silviomoreto

silviomoreto Oct 19, 2012

Thank you! You saved my day too!

Thank you! You saved my day too!

@asavin

This comment has been minimized.

Show comment Hide comment
@asavin

asavin Nov 14, 2012

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

asavin commented Nov 14, 2012

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

@kerwitz

This comment has been minimized.

Show comment Hide comment
@kerwitz

kerwitz Dec 9, 2012

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

kerwitz commented Dec 9, 2012

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

@pixelnourish

This comment has been minimized.

Show comment Hide comment
@pixelnourish

pixelnourish Dec 10, 2012

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

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

@fat

This comment has been minimized.

Show comment Hide comment
@fat

fat Dec 20, 2012

Member

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.

Member

fat commented Dec 20, 2012

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.

@fat fat closed this Dec 20, 2012

@lookfirst

This comment has been minimized.

Show comment Hide comment
@lookfirst

lookfirst Dec 20, 2012

Contributor

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.

Contributor

lookfirst commented Dec 20, 2012

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

This comment has been minimized.

Show comment Hide comment
@kand

kand Mar 7, 2013

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

kand commented Mar 7, 2013

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

This comment has been minimized.

Show comment Hide comment
@s-anes

s-anes Apr 26, 2013

Really useful! Thanks!

s-anes commented Apr 26, 2013

Really useful! Thanks!

@Wilsonilo

This comment has been minimized.

Show comment Hide comment
@Wilsonilo

Wilsonilo May 14, 2013

Thanks a lot!

Thanks a lot!

@dip7ul

This comment has been minimized.

Show comment Hide comment
@dip7ul

dip7ul May 24, 2013

Really useful work on mobile safari ipad

dip7ul commented May 24, 2013

Really useful work on mobile safari ipad

@Gajjar

This comment has been minimized.

Show comment Hide comment
@Gajjar

Gajjar Jun 19, 2013

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

Gajjar commented Jun 19, 2013

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

@naelshawwa

This comment has been minimized.

Show comment Hide comment
@naelshawwa

naelshawwa Jul 16, 2013

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?

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

This comment has been minimized.

Show comment Hide comment
@smaier

smaier Jul 24, 2013

thanks a lot!

smaier commented Jul 24, 2013

thanks a lot!

@contrerasjf0

This comment has been minimized.

Show comment Hide comment
@contrerasjf0

contrerasjf0 Oct 11, 2016

Thaks a lot! this was help ful

Thaks a lot! this was help ful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment