Search and Top Navigation
#8984 closed bug (fixed)
Opened January 18, 2013 08:25PM UTC
Closed January 26, 2013 04:36PM UTC
Last modified June 04, 2013 04:12PM UTC
Dialog: Modal dialogs display behind overlay when using appendTo option
| Reported by: | limitstudios | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.10.1 |
| Component: | ui.dialog | Version: | 1.10.0 |
| Keywords: | regression | Cc: | |
| Blocked by: | Blocking: |
Description
Using the code provided at jsfiddle or url below and clicking the button causes the overlay to position above the dialog, making the dialog unusable.
Attachments (0)
Change History (14)
Changed January 18, 2013 08:30PM UTC by comment:1
Changed January 18, 2013 08:33PM UTC by comment:2
| keywords: | → regression |
|---|---|
| milestone: | none → 1.10.1 |
| priority: | minor → major |
| status: | new → open |
| summary: | jQueryUI 1.10 Overlay is above dialog → Dialog: Modal dialogs display behind overlay when using appendTo option |
A properly reduced test case: http://jsfiddle.net/rFAkt/2/
Changed January 19, 2013 03:42PM UTC by comment:3
Gonna look into this, along with the open dialog PR.
Changed January 19, 2013 05:17PM UTC by comment:4
| owner: | → joern.zaefferer |
|---|---|
| status: | open → assigned |
Changed January 25, 2013 02:23PM UTC by comment:5
| owner: | joern.zaefferer |
|---|---|
| status: | assigned → open |
Since David is working on other dialog bugs and I'm not going to tackle this in the next few days, unassigning myself...
Changed January 25, 2013 04:01PM UTC by comment:6
| _comment0: | "Modal dialogs display behind overlay when using appendTo option" \ \ And they do not display at all when used in a fully scoped css theme. I have to make hacks to work around this and the issue of the ticket. Such as: \ \ {{{ \ var dz = $(".ui-front").css( "z-index" ) \ $(".ui-widget-overlay").css({ "z-index": dz-1 }); \ $(".ui-widget-overlay").appendTo("#my-scoping-id"); \ }}} \ \ I have a long list of bugs that occur when using scoped css themes. Will post in time. I only just now managed to register here, I tried all kinds of random strings as a username last night (there is no way someone has laready registered as "vdfuh5ngsby7atbva3dhpoltdysb", yet I was told that name was already in use...), then it occurred to me to register as a GUID, that worked. So here I am, and once I can be bothered to compile and document the long list of bugs that I have observed, I will post them. → 1359129758386175 |
|---|---|
| _comment1: | "Modal dialogs display behind overlay when using appendTo option" \ \ And they do not display at all when used in a fully scoped css theme. I have to make hacks to work around this and the issue of the ticket. Such as: \ \ {{{ \ var dz = $(".ui-front").css( "z-index" ) \ $(".ui-widget-overlay").css({ "z-index": dz-1 }); \ $(".ui-widget-overlay").appendTo("#my-scoping-id"); \ }}} \ \ I have a long list of bugs that occur when using scoped css themes. Will post in time. I only just now managed to register here, I tried all kinds of random strings as a username last night (there is no way someone has already registered as "vdfuh5ngsby7atbva3dhpoltdysb", yet I was told that name was already in use...), then it occurred to me to register as a GUID, that worked. So here I am, and once I can be bothered to compile and document the long list of bugs that I have observed, I will post them. → 1359130652452958 |
| _comment2: | "Modal dialogs display behind overlay when using appendTo option" \ \ And overlays do not display at all when used in a fully scoped css theme. I have to make hacks to work around this and the issue of the ticket. Such as: \ \ {{{ \ var dz = $(".ui-front").css( "z-index" ) \ $(".ui-widget-overlay").css({ "z-index": dz-1 }); \ $(".ui-widget-overlay").appendTo("#my-scoping-id"); \ }}} \ \ I have a long list of bugs that occur when using scoped css themes. Will post in time. I only just now managed to register here, I tried all kinds of random strings as a username last night (there is no way someone has already registered as "vdfuh5ngsby7atbva3dhpoltdysb", yet I was told that name was already in use...), then it occurred to me to register as a GUID, that worked. So here I am, and once I can be bothered to compile and document the long list of bugs that I have observed, I will post them. → 1359130729990874 |
"Modal dialogs display behind overlay when using appendTo option"
And overlays do not display at all when used in a fully scoped css theme. I have to use hacks to work around this and the issue of the ticket. Such as:
var dz = $(".ui-front").css( "z-index" )
$(".ui-widget-overlay").css({ "z-index": dz-1 });
$(".ui-widget-overlay").appendTo("#my-scoping-id");
I have a long list of bugs that occur when using scoped css themes. Will post in time. I only just now managed to register here, I tried all kinds of random strings as a username last night (there is no way someone has already registered as "vdfuh5ngsby7atbva3dhpoltdysb", yet I was told that name was already in use...), then it occurred to me to register as a GUID, that worked. So here I am, and once I can be bothered to compile and document the long list of bugs that I have observed, I will post them.
Changed January 26, 2013 11:00AM UTC by comment:7
Submitted pull request
https://github.com/jquery/jquery-ui/pull/894
Let me know if there is any more work that needs to be done on this.
Changed January 26, 2013 04:36PM UTC by comment:8
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Dialog: modified _createOverlay to _appendTo instead of document.body. Fixed #8984 - Modal dialogs display behind overlay when using appendTo option
Changeset: 55360eeb7eae5c560d51b09178e64d83c59223a6
Changed January 31, 2013 08:09PM UTC by comment:9
I added the commited code to my jqueryui file and it still didn't fix my test case
Changed January 31, 2013 08:11PM UTC by comment:10
@limitstudios We'd need a reduced test case showing the problem.
Changed January 31, 2013 08:35PM UTC by comment:11
yep I'm trying to create a reduce one, but only since upgraded to 1.10.0 has caused this
Changed February 19, 2013 06:35AM UTC by comment:12
The fix in 1.10.1 works for me. Thanks!
Changed June 04, 2013 04:04PM UTC by comment:13
Comenten esta linea de codigo del Jquery y con eso se soluciona:
$(".ui-dialog:visible:last .ui-dialog-content")
.data("ui-dialog")._focusTabbable();
Saludos desde Merida, Yucatan, Mexico...
Changed June 04, 2013 04:12PM UTC by comment:14
@TUX Please stop posting that comment in various closed tickets.
The reason it is attached to a form is the dialog contains form fields which are then submitted via the dialog