Skip to main content

Search and Top Navigation

#7120 closed bug (fixed)

Opened March 16, 2011 10:22AM UTC

Closed October 24, 2012 09:05PM UTC

Dialog: Modal operation interrupts drag drop marker functionality on gmaps

Reported by: dutts Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.10
Keywords: modal Cc:
Blocked by: Blocking:

This was originally discovered while developing on jQuery 1.4.2 but can be reproduced using the latest jQuery.

When embedding a google map in a jQuery dialog, draggable markers cannot be dropped if the dialog is modal. See the following example (ignore the gmaps API error), observe that changing the modal setting to false on the dialog resumes correct behaviour).

I am guessing that in the code which implements dialog modality, mouse events are being intercepted and then only forwarded to the modal window contents, but the mouseUp event isn't being fed through.

Attachments (0)
Change History (6)

Changed September 07, 2011 12:54PM UTC by scottgonzalez comment:1

keywords: → modal

Changed May 10, 2012 06:15PM UTC by adurante comment:2

I think this line causes the problem. It captures a bunch of events (focus,mousedown,mouseup,keydown,keypress,click) at the document object and prevents the propagation of those whose target element has a z-index lower than the max overlay z-index. Since google maps uses divs with low z-index values to render its elements (including markers), the mousedown event is not received by the map because the marker usually has a z-index lower than the max overlay z-index.

A workaround for this problem is to replace the if statement at line 706 by the following code:

var parentWidget = $( ).closest('.ui-widget');
if ( parentWidget.size() && parentWidget.zIndex() < $.ui.dialog.overlay.maxZ){
	return false;
} else if (parentWidget.size() == 0 &&  $( ).zIndex() < $.ui.dialog.overlay.maxZ ) {
	return false;

Basically, if the target element is inside a UI widget, consider the z-index of that widget instead of the z-index of the target element. It may not be the desired behaviour for some specific situations but at least it solves the google maps problem.

Sorry for the grammar.

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:3


Changed October 15, 2012 09:13PM UTC by drewkimrey comment:4

status: newopen

I updated the jsbin to use the latest versions and issue is still there

Changed October 24, 2012 02:29AM UTC by jzaefferer comment:5

summary: Dialog - Modal operation interrupts drag drop marker functionality on gmapsDialog: Modal operation interrupts drag drop marker functionality on gmaps

Changed October 24, 2012 09:05PM UTC by Nate Eagle comment:6

resolution: → fixed
status: openclosed

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