Skip to content

Commit 3829a37

Browse files
Nate Eaglejzaefferer
Nate Eagle
authored and
jzaefferer
committed
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.
1 parent 88bfb75 commit 3829a37

File tree

8 files changed

+138
-291
lines changed

8 files changed

+138
-291
lines changed

‎tests/unit/dialog/dialog.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ <h2 id="qunit-banner"></h2>
5252
<h2 id="qunit-userAgent"></h2>
5353
<ol id="qunit-tests"></ol>
5454
<div id="qunit-fixture">
55-
55+
<div id="dialog1"></div>
56+
<div id="dialog2"></div>
5657
</div>
5758
</body>
5859
</html>

‎tests/unit/dialog/dialog_common.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ TestHelpers.commonWidgetTests( "dialog", {
2626
stack: true,
2727
title: '',
2828
width: 300,
29-
zIndex: 1000,
3029

3130
// callbacks
3231
create: null

‎tests/unit/dialog/dialog_methods.js

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -106,24 +106,30 @@ test("isOpen", function() {
106106
});
107107

108108
test("moveToTop", function() {
109-
expect( 3 );
110-
111-
var d1, d2, dlg1, dlg2,
112-
expected = $('<div></div>').dialog(),
113-
actual = expected.dialog('moveToTop');
114-
equal(actual, expected, 'moveToTop is chainable');
115-
116-
d1 = $('<div></div>').dialog();
117-
dlg1 = d1.parents('.ui-dialog');
118-
d1.dialog('close');
119-
d1.dialog('open');
120-
d2 = $('<div></div>').dialog();
121-
dlg2 = d2.parents('.ui-dialog');
122-
d2.dialog('close');
123-
d2.dialog('open');
124-
ok(dlg1.css('zIndex') < dlg2.css('zIndex'), 'dialog 1 under dialog 2 before moveToTop method called');
125-
d1.dialog('moveToTop');
126-
ok(dlg1.css('zIndex') > dlg2.css('zIndex'), 'dialog 1 above dialog 2 after moveToTop method called');
109+
expect( 5 );
110+
function order() {
111+
var actual = $( ".ui-dialog" ).map(function() {
112+
return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" );
113+
}).get().reverse();
114+
deepEqual( actual, $.makeArray( arguments ) );
115+
}
116+
var dialog1, dialog2,
117+
focusOn = "dialog1";
118+
dialog1 = $( "#dialog1" ).dialog({
119+
focus: function() {
120+
equal( focusOn, "dialog1" );
121+
}
122+
});
123+
focusOn = "dialog2";
124+
dialog2 = $( "#dialog2" ).dialog({
125+
focus: function() {
126+
equal( focusOn, "dialog2" );
127+
}
128+
});
129+
order( 2, 1 );
130+
focusOn = "dialog1";
131+
dialog1.dialog( "moveToTop" );
132+
order( 1, 2 );
127133
});
128134

129135
test("open", function() {

‎tests/unit/dialog/dialog_tickets.js

Lines changed: 2 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ test("#6137: dialog('open') causes form elements to reset on IE7", function() {
9999
'<input type="radio" name="radio" id="b" value="b">b</input></form>').appendTo( "body" ).dialog({autoOpen: false});
100100

101101
d1.find('#b').prop( "checked", true );
102-
equal($('input:checked').val(), 'b', "checkbox b is checked");
102+
equal(d1.find('input:checked').val(), 'b', "checkbox b is checked");
103103

104104
d1.dialog('open');
105-
equal($('input:checked').val(), 'b', "checkbox b is checked");
105+
equal(d1.find('input:checked').val(), 'b', "checkbox b is checked");
106106

107107
d1.remove();
108108
});
@@ -117,81 +117,6 @@ test("#6645: Missing element not found check in overlay", function(){
117117
d1.add(d2).remove();
118118
});
119119

120-
test("#6966: Escape key closes all dialogs, not the top one", function(){
121-
expect(24);
122-
// test with close function removing dialog triggered through the overlay
123-
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true, close: function(){ d1.remove(); }});
124-
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true, close: function(){ d2.remove(); }});
125-
126-
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog is open');
127-
ok(d2.data('dialog') && d2.dialog('isOpen'), 'second dialog is open');
128-
129-
$( document ).simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
130-
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog still open');
131-
ok(!d2.data('dialog'), 'second dialog is closed');
132-
133-
$( document ).simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
134-
ok(!d1.data('dialog'), 'first dialog is closed');
135-
ok(!d2.data('dialog'), 'second dialog is closed');
136-
137-
d2.remove();
138-
d1.remove();
139-
140-
// test with close function removing dialog triggered through the dialog
141-
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true, close: function(){ d1.remove(); }});
142-
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true, close: function(){ d2.remove(); }});
143-
144-
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog is open');
145-
ok(d2.data('dialog') && d2.dialog('isOpen'), 'second dialog is open');
146-
147-
d2.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
148-
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog still open');
149-
ok(!d2.data('dialog'), 'second dialog is closed');
150-
151-
d1.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
152-
ok(!d1.data('dialog'), 'first dialog is closed');
153-
ok(!d2.data('dialog'), 'second dialog is closed');
154-
155-
d2.remove();
156-
d1.remove();
157-
158-
// test without close function removing dialog
159-
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true});
160-
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true});
161-
162-
ok(d1.dialog("isOpen"), 'first dialog is open');
163-
ok(d2.dialog("isOpen"), 'second dialog is open');
164-
165-
d2.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
166-
ok(d1.dialog("isOpen"), 'first dialog still open');
167-
ok(!d2.dialog("isOpen"), 'second dialog is closed');
168-
169-
d1.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
170-
ok(!d1.dialog("isOpen"), 'first dialog is closed');
171-
ok(!d2.dialog("isOpen"), 'second dialog is closed');
172-
173-
d2.remove();
174-
d1.remove();
175-
176-
// test without close function removing dialog triggered through the overlay
177-
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true});
178-
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true});
179-
180-
ok(d1.dialog("isOpen"), 'first dialog is open');
181-
ok(d2.dialog("isOpen"), 'second dialog is open');
182-
183-
$( document ).simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
184-
ok(d1.dialog("isOpen"), 'first dialog still open');
185-
ok(!d2.dialog("isOpen"), 'second dialog is closed');
186-
187-
$( document ).simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
188-
ok(!d1.dialog("isOpen"), 'first dialog is closed');
189-
ok(!d2.dialog("isOpen"), 'second dialog is closed');
190-
191-
d2.remove();
192-
d1.remove();
193-
});
194-
195120
test("#4980: Destroy should place element back in original DOM position", function(){
196121
expect( 2 );
197122
container = $('<div id="container"><div id="modal">Content</div></div>');

‎tests/visual/dialog/complex-dialogs.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Dialog Visual Test</title>
6+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
7+
<script src="../../../jquery-1.8.2.js"></script>
8+
<script src="../../../external/jquery.bgiframe-2.1.2.js"></script>
9+
<script src="../../../ui/jquery.ui.core.js"></script>
10+
<script src="../../../ui/jquery.ui.widget.js"></script>
11+
<script src="../../../ui/jquery.ui.mouse.js"></script>
12+
<script src="../../../ui/jquery.ui.draggable.js"></script>
13+
<script src="../../../ui/jquery.ui.position.js"></script>
14+
<script src="../../../ui/jquery.ui.resizable.js"></script>
15+
<script src="../../../ui/jquery.ui.dialog.js"></script>
16+
17+
<!-- stuff needed to make things complex -->
18+
<script src="../../../ui/jquery.ui.datepicker.js"></script>
19+
<script src="../../../ui/jquery.ui.menu.js"></script>
20+
<script src="../../../ui/jquery.ui.autocomplete.js"></script>
21+
<script src="../../../ui/jquery.ui.tooltip.js"></script>
22+
23+
<script>
24+
$(function() {
25+
$( "#dialog" ).dialog({
26+
modal: true,
27+
height: 300,
28+
width: 500
29+
});
30+
31+
var datepickerDialog = $( "#dialog-datepicker" ).dialog({
32+
autoOpen: false,
33+
modal: true,
34+
}),
35+
36+
autocompleteDialog = $( "#dialog-autocomplete" ).dialog({
37+
autoOpen: false,
38+
modal: false,
39+
width: 600
40+
});
41+
42+
$( "#open-datepicker" ).click(function() {
43+
datepickerDialog.dialog( "open" );
44+
});
45+
46+
$( "#open-autocomplete" ).click(function() {
47+
autocompleteDialog.dialog( "open" );
48+
});
49+
50+
$( "#datepicker" ).datepicker();
51+
52+
$( "#autocomplete" ).autocomplete({
53+
source: [
54+
"ActionScript",
55+
"AppleScript",
56+
"Asp",
57+
"BASIC",
58+
"Scheme"
59+
]
60+
});
61+
62+
$( document ).tooltip();
63+
});
64+
</script>
65+
</head>
66+
<body>
67+
68+
<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>
69+
<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>
70+
71+
<a href="#">Outside link</a>
72+
73+
<div id="dialog" title="Basic dialog">
74+
<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>
75+
<p><button id="open-datepicker">Open another window with a datepicker.</button></p>
76+
</div>
77+
78+
<div id="dialog-datepicker" title="A dialog with a datepicker">
79+
<p>Date: <input id="datepicker"></p>
80+
<p><button id="open-autocomplete">Open another window with an autocomplete and a tooltip.</button></p>
81+
</div>
82+
83+
<div id="dialog-autocomplete">
84+
<label for="autocomplete">Tags: </label>
85+
<input id="autocomplete" title="Try typing something!">
86+
</div>
87+
88+
</body>
89+
</html>

‎themes/base/jquery.ui.core.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
.ui-helper-clearfix { zoom: 1; }
2020
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
2121

22+
.ui-front { z-index: 100; }
23+
2224

2325
/* Interaction Cues
2426
----------------------------------*/
@@ -36,4 +38,4 @@
3638
----------------------------------*/
3739

3840
/* Overlays */
39-
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
41+
.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

‎themes/base/jquery.ui.dialog.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
*
99
* http://docs.jquery.com/UI/Dialog#theming
1010
*/
11-
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
11+
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; outline: 0; }
1212
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
1313
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
1414
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }

0 commit comments

Comments
 (0)