#3534 closed bug (fixed)

Opened October 31, 2008 05:45PM UTC

Closed October 24, 2012 09:05PM UTC

Last modified May 11, 2018 06:43AM UTC

Dialog: Modal dialog disables all input elements on page.

Reported by:	Bethrezen	Owned by:	scottgonzalez
Priority:	minor	Milestone:	1.10.0
Component:	ui.dialog	Version:	1.6rc2
Keywords:	modal	Cc:	b37hr3z3n@gmail.com
Blocked by:		Blocking:

Description

If i create a dialog using this code:

	$("#procent_dialog").dialog({
	 width: 450,
	 height: 300,
	 title: "Procents",
		buttons: {
			"Ok": function() {
				make_procents();
			},
			"Cancel": function() {
				$(this).dialog("close");
			}
		},
modal: true,
		overlay: {
			opacity: 0.5,
			background: "black"
		}
	}).dialog('close');

Then all my input elements(ie. checkboxes, buttons, textfields) are non-clickable. If i disable "modal" option of dialog - all works OK.

jquery version 1.2.6

jquery ui 1.6rc2

This bug works in Firefox 3.0.3 and Opera 9.60. On win and linux. On IE I didn't tested it.

Attachments (0)

Change History (7)

Changed November 01, 2008 02:28AM UTC by scottgonzalez comment:1

priority:	critical → minor
status:	new → accepted

This is probably due to the timeout that is used to disable the inputs. The close event is firing before the elements are actually disabled, so the event handlers are not being cleared. Try setting the autoOpen option to false on init instead of immediately closing the dialog.

Changed May 06, 2011 06:58PM UTC by captdragon comment:2

Anyone have a workaround? I tried what scott.gonzalez suggested but did not work.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:3

milestone:	TBD

Milestone TBD deleted

Changed October 22, 2012 03:25PM UTC by scottgonzalez comment:4

keywords:	input, dialog → modal
milestone:	→ 1.10.0

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

summary:	Modal dialog disables all input elements on page. → Dialog: Modal dialog disables all input elements on page.

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

resolution:	→ fixed
status:	accepted → closed

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

Changed May 11, 2018 06:43AM UTC by nulll-pointer comment:7

I'm using jqueryui 1.12.1. I'm facing a similar problem, I have a login modal which overlays the whole page, when jquery ui dialog is active, I am unable to focus the input textboxes on the login modal.

These textboxes have a higher z-index value.

I've set an event handler which alerts whenever the textbox is focused and it works fine, which means that the focus event is called.

Search and Top Navigation