jquery-ui/tests/visual/dialog/complex-dialogs.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Dialog Visual Test</title>
	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
	<script src="../../../jquery-1.8.2.js"></script>
	<script src="../../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../../ui/jquery.ui.core.js"></script>
	<script src="../../../ui/jquery.ui.widget.js"></script>
	<script src="../../../ui/jquery.ui.mouse.js"></script>
	<script src="../../../ui/jquery.ui.draggable.js"></script>
	<script src="../../../ui/jquery.ui.position.js"></script>
	<script src="../../../ui/jquery.ui.resizable.js"></script>
	<script src="../../../ui/jquery.ui.dialog.js"></script>

	<!-- stuff needed to make things complex -->
	<script src="../../../ui/jquery.ui.datepicker.js"></script>
	<script src="../../../ui/jquery.ui.menu.js"></script>
	<script src="../../../ui/jquery.ui.autocomplete.js"></script>
	<script src="../../../ui/jquery.ui.tooltip.js"></script>

	<script>
	$(function() {
		$( "#dialog" ).dialog({
			modal: true,
			height: 300,
			width: 500
		});

		var datepickerDialog = $( "#dialog-datepicker" ).dialog({
				autoOpen: false,
				modal: true
			}),

			autocompleteDialog = $( "#dialog-autocomplete" ).dialog({
				autoOpen: false,
				modal: false,
				width: 600
			});

		$( "#open-datepicker" ).click(function() {
			datepickerDialog.dialog( "open" );
		});

		$( "#open-autocomplete" ).click(function() {
			autocompleteDialog.dialog( "open" );
		});

		$( "#datepicker" ).datepicker();

		$( "#autocomplete" ).autocomplete({
			source: [
				"ActionScript",
				"AppleScript",
				"Asp",
				"BASIC",
				"Scheme"
			]
		});

		$( document ).tooltip();
	});
	</script>
</head>
<body>

<p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p>
<p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p>

<a href="#">Outside link</a>

<div id="dialog" title="Basic dialog">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
	<p><button id="open-datepicker">Open another window with a datepicker.</button></p>
</div>

<div id="dialog-datepicker" title="A dialog with a datepicker">
	<p>Date: <input id="datepicker"></p>
	<p><button id="open-autocomplete">Open another window with an autocomplete and a tooltip.</button></p>
</div>

<div id="dialog-autocomplete">
	<label for="autocomplete">Tags: </label>
	<input id="autocomplete" title="Try typing something!">
</div>

</body>
</html>
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. 2012-10-15 20:12:21 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
			`<title>Dialog Visual Test</title>`
			`<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">`
			`<script src="../../../jquery-1.8.2.js"></script>`
			`<script src="../../../external/jquery.bgiframe-2.1.2.js"></script>`
			`<script src="../../../ui/jquery.ui.core.js"></script>`
			`<script src="../../../ui/jquery.ui.widget.js"></script>`
			`<script src="../../../ui/jquery.ui.mouse.js"></script>`
			`<script src="../../../ui/jquery.ui.draggable.js"></script>`
			`<script src="../../../ui/jquery.ui.position.js"></script>`
			`<script src="../../../ui/jquery.ui.resizable.js"></script>`
			`<script src="../../../ui/jquery.ui.dialog.js"></script>`

			`<!-- stuff needed to make things complex -->`
			`<script src="../../../ui/jquery.ui.datepicker.js"></script>`
			`<script src="../../../ui/jquery.ui.menu.js"></script>`
			`<script src="../../../ui/jquery.ui.autocomplete.js"></script>`
			`<script src="../../../ui/jquery.ui.tooltip.js"></script>`

			`<script>`
			`$(function() {`
			`$( "#dialog" ).dialog({`
			`modal: true,`
			`height: 300,`
			`width: 500`
			`});`

			`var datepickerDialog = $( "#dialog-datepicker" ).dialog({`
			`autoOpen: false,`
Dialog: Prevent dialog form losing focus (or move it back in IE <= 8). 2012-10-23 00:33:15 +00:00			`modal: true`
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. 2012-10-15 20:12:21 +00:00			`}),`

			`autocompleteDialog = $( "#dialog-autocomplete" ).dialog({`
			`autoOpen: false,`
			`modal: false,`
			`width: 600`
			`});`

			`$( "#open-datepicker" ).click(function() {`
			`datepickerDialog.dialog( "open" );`
			`});`

			`$( "#open-autocomplete" ).click(function() {`
			`autocompleteDialog.dialog( "open" );`
			`});`

			`$( "#datepicker" ).datepicker();`

			`$( "#autocomplete" ).autocomplete({`
			`source: [`
			`"ActionScript",`
			`"AppleScript",`
			`"Asp",`
			`"BASIC",`
			`"Scheme"`
			`]`
			`});`

			`$( document ).tooltip();`
			`});`
			`</script>`
			`</head>`
			`<body>`

			`<p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p>`
			`<p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p>`

			`<a href="#">Outside link</a>`

			`<div id="dialog" title="Basic dialog">`
			`<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>`
			`<p><button id="open-datepicker">Open another window with a datepicker.</button></p>`
			`</div>`

			`<div id="dialog-datepicker" title="A dialog with a datepicker">`
			`<p>Date: <input id="datepicker"></p>`
			`<p><button id="open-autocomplete">Open another window with an autocomplete and a tooltip.</button></p>`
			`</div>`

			`<div id="dialog-autocomplete">`
			`<label for="autocomplete">Tags: </label>`
			`<input id="autocomplete" title="Try typing something!">`
			`</div>`

			`</body>`
			`</html>`