Dialog: "modal" Dialog Incorrectly Cancels Input Events

A more specific example:

<style>
.my-popup { z-index: 10; }
</style>

<script type="text/javascript">
var popup = $('<div class="my-popup"><input id="xyz" type="checkbox" /></div>');
popup.dialog({modal:true});
</script>

The checkbox will not be clickable.

Note that if the style is inline, it works just fine.

Note, oas of 1.8.1 this problem still exists in IE7. It does not seem to happen in other browsers.

#7608 is a duplicate of this ticket.

Just stumbled upon this problem in version 1.8.16. Multiple browsers are effected. At least, Chrome, Firefox and IE :-)

I would suggest to raise priority because this is pretty nasty.

I have worked on getting an application coded and up to the point of using a modal dialog and have finaly gotten everything to function as I want it to do. Now got hit with this error. It was very dissappointing. The work around in the previous comments is not clear. But with just as little code you can make this work.

What you need to do is to set the values of the objects you are going to include ni the dialog box higher then the container they are carried in. In mankyd's example above set the z-index higher and the modal will work. So in the first example where there are two div's set the outside div to a z-index of x and the inside div to a z-index of x + 1 and it should work.

Thank you

We were just bit hard by this bug again in IE7. Is there any plan for a fix? This is a nasty one.

We just ran into this bug, and in our case we cannot just change the z-index, since elements of the same class appear both inside and outside of our dialog, and we don't want those elements to show through the overlay when they are outside the dialog.

Thanks to mankyd's good bug description, we quickly found the source of the bug and came up with this fix (version 1.8.14). Change the following code:

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {
	return false;
}

... to this:

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ &&
    $(event.target).closest('.ui-dialog').zIndex() < $.ui.dialog.overlay.maxZ) {
	return false;
}

This makes the dialog continue to block events on items with a z-index lower than the topmost overlay, *but only if they are not a child element of a dialog which is above the overlay*.

Hopefully this will help anybody who's having the same problem. I'll work on submitting a fix to GitHub shortly.

I can confirm the problem and the fix suggested solved for me.

The problem was found with http://bugs.jqueryui.com/ticket/7950

Replying to [comment:9 saulotoledo]:

I can confirm the problem and the fix suggested solved for me. The problem was found with http://bugs.jqueryui.com/ticket/7950

Yes the fix works for FF and IE, but not for Chrome. Anypne has any suggestion?

Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets:

Fixes #3534 - Dialog: Modal dialog disables all input elements on page.

Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari.

Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall.

Fixes #5388 - Dialog: Don't change z-index when already at the top.

Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events.

Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead.

Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work.

Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle.

Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6).

Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps.

Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog.

Fixes #8583 - Dialog: Mouse event wrongly stopped.

Fixes #8722 - Dialog: Remove stack option.

Fixes #8729 - Dialog: Remove zIndex option.

Changeset: 3829a37ca122e923c3a08b964c4b1a946a2a1456