mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
Dialog: Switch back to shuffling z-index, but only look at .ui-front siblings.
Fixes #9166 - Dialog: moveToTop implementation resets flash/video/iframe/scroll Fixes #9364 - Dialog: Click of element with tooltip scrolls the dialog to the top
This commit is contained in:
parent
80b17bb40a
commit
e263ebda99
@ -144,8 +144,8 @@ test("moveToTop", function() {
|
|||||||
expect( 5 );
|
expect( 5 );
|
||||||
function order() {
|
function order() {
|
||||||
var actual = $( ".ui-dialog" ).map(function() {
|
var actual = $( ".ui-dialog" ).map(function() {
|
||||||
return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" );
|
return +$( this ).css( "z-index" );
|
||||||
}).get().reverse();
|
}).get();
|
||||||
deepEqual( actual, $.makeArray( arguments ) );
|
deepEqual( actual, $.makeArray( arguments ) );
|
||||||
}
|
}
|
||||||
var dialog1, dialog2,
|
var dialog1, dialog2,
|
||||||
@ -161,10 +161,23 @@ test("moveToTop", function() {
|
|||||||
equal( focusOn, "dialog2" );
|
equal( focusOn, "dialog2" );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
order( 2, 1 );
|
order( 100, 101 );
|
||||||
focusOn = "dialog1";
|
focusOn = "dialog1";
|
||||||
dialog1.dialog( "moveToTop" );
|
dialog1.dialog( "moveToTop" );
|
||||||
order( 1, 2 );
|
order( 102, 101 );
|
||||||
|
});
|
||||||
|
|
||||||
|
test( "moveToTop: content scroll stays intact", function() {
|
||||||
|
expect( 2 );
|
||||||
|
var otherDialog = $( "#dialog1" ).dialog(),
|
||||||
|
scrollDialog = $( "#form-dialog" ).dialog({
|
||||||
|
height: 200
|
||||||
|
});
|
||||||
|
scrollDialog.scrollTop( 50 );
|
||||||
|
equal( scrollDialog.scrollTop(), 50 );
|
||||||
|
|
||||||
|
otherDialog.dialog( "moveToTop" );
|
||||||
|
equal( scrollDialog.scrollTop(), 50 );
|
||||||
});
|
});
|
||||||
|
|
||||||
test("open", function() {
|
test("open", function() {
|
||||||
|
62
tests/visual/dialog/stacking.html
Normal file
62
tests/visual/dialog/stacking.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!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.10.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.button.js"></script>
|
||||||
|
<script src="../../../ui/jquery.ui.dialog.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
$(function() {
|
||||||
|
var iframeDialog = $( "#dialog-iframe" ).dialog({
|
||||||
|
position: {
|
||||||
|
my: "right-90 center"
|
||||||
|
},
|
||||||
|
height: 400
|
||||||
|
}),
|
||||||
|
|
||||||
|
scrollingDialog = $( "#dialog-scrolling" ).dialog({
|
||||||
|
maxHeight: 200,
|
||||||
|
position: {
|
||||||
|
my: "left+90 center"
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
otherDialog = $( "#dialog-other" ).dialog({
|
||||||
|
width: 200,
|
||||||
|
height: 150
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p>
|
||||||
|
<p>EXPECTED: When focusing on one or the other dialog, it shouldn't affect how the content is displayed on the other dialog. It shouldn't reload the iframe or reset the scroll.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="dialog-iframe" title="Dialog that embeds an iframe">
|
||||||
|
<iframe src="animated.html" height="400"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dialog-scrolling" title="Dialog with scroll">
|
||||||
|
<p style="height:600px;background:#eee">a bunch of content</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -33,7 +33,11 @@
|
|||||||
|
|
||||||
<h2>Dialog</h2>
|
<h2>Dialog</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><a href="dialog/animated.html">Animations</a></li>
|
||||||
|
<li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li>
|
||||||
|
<li><a href="dialog/form.html">Forms in dialogs</a></li>
|
||||||
<li><a href="dialog/performance.html">Performance</a></li>
|
<li><a href="dialog/performance.html">Performance</a></li>
|
||||||
|
<li><a href="dialog/stacking.html">Overlapping dialogs</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Effects</h2>
|
<h2>Effects</h2>
|
||||||
|
12
ui/jquery.ui.dialog.js
vendored
12
ui/jquery.ui.dialog.js
vendored
@ -212,7 +212,17 @@ $.widget( "ui.dialog", {
|
|||||||
},
|
},
|
||||||
|
|
||||||
_moveToTop: function( event, silent ) {
|
_moveToTop: function( event, silent ) {
|
||||||
var moved = !!this.uiDialog.nextAll(":visible").insertBefore( this.uiDialog ).length;
|
var moved = false,
|
||||||
|
zIndicies = this.uiDialog.siblings( ".ui-front:visible" ).map(function() {
|
||||||
|
return +$( this ).css( "z-index" );
|
||||||
|
}).get(),
|
||||||
|
zIndexMax = Math.max.apply( null, zIndicies );
|
||||||
|
|
||||||
|
if ( zIndexMax >= +this.uiDialog.css( "z-index" ) ) {
|
||||||
|
this.uiDialog.css( "z-index", zIndexMax + 1 );
|
||||||
|
moved = true;
|
||||||
|
}
|
||||||
|
|
||||||
if ( moved && !silent ) {
|
if ( moved && !silent ) {
|
||||||
this._trigger( "focus", event );
|
this._trigger( "focus", event );
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user