Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Dialog: Use position:fixed for the overlay, heavily simplifying the o…

…verlay code.
  • Loading branch information...
commit 86a05cb232e85917b6c36aab50e596db1b17acef 1 parent 2f09366
@neagle neagle authored jzaefferer committed
View
30 tests/visual/dialog/complex-dialogs.html
@@ -3,24 +3,24 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</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>
+ <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 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>
- <link rel="stylesheet" href="../demos.css">
+ <link rel="stylesheet" href="../../../demos/demos.css">
<script>
$(function() {
$( "#dialog" ).dialog({
View
24 tests/visual/dialog/multiple-dialogs.html
@@ -3,18 +3,18 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Basic modal</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>
-
- <link rel="stylesheet" href="../demos.css">
+ <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>
+
+ <link rel="stylesheet" href="../../../demos/demos.css">
<script>
$(function() {
$( "#dialog-modal-1" ).dialog({
View
2  themes/base/jquery.ui.core.css
@@ -38,4 +38,4 @@
----------------------------------*/
/* Overlays */
-.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
View
88 ui/jquery.ui.dialog.js
@@ -270,8 +270,6 @@ $.widget("ui.dialog", {
this._trigger( "close", event );
}
- $.ui.dialog.overlay.resize();
-
return this;
},
@@ -391,7 +389,6 @@ $.widget("ui.dialog", {
$( this )
.removeClass( "ui-dialog-dragging" );
that._trigger( "dragStop", event, filteredUi( ui ) );
- $.ui.dialog.overlay.resize();
}
});
},
@@ -437,7 +434,6 @@ $.widget("ui.dialog", {
options.height = $( this ).height();
options.width = $( this ).width();
that._trigger( "resizeStop", event, filteredUi( ui ) );
- $.ui.dialog.overlay.resize();
}
})
.css( "position", position )
@@ -666,18 +662,13 @@ $.extend( $.ui.dialog.overlay, {
oldInstances: [],
maxZ: 0,
events: $.map(
- "focus,mousedown,mouseup,keydown,keypress,click".split( "," ),
+ "focus mousedown keydown keypress".split( " " ),
function( event ) {
return event + ".dialog-overlay";
}
).join( " " ),
create: function( dialog ) {
- if ( this.instances.length === 0 ) {
- // handle window resize
- $( window ).bind( "resize.dialog-overlay", $.ui.dialog.overlay.resize );
- }
-
var $el = ( this.oldInstances.pop() || $( "<div>" ).addClass( "ui-widget-overlay" ) );
// allow closing by pressing the escape key
@@ -693,10 +684,7 @@ $.extend( $.ui.dialog.overlay, {
}
});
- $el.appendTo( document.body ).css({
- width: this.width(),
- height: this.height()
- });
+ $el.appendTo( document.body );
if ( $.fn.bgiframe ) {
$el.bgiframe();
@@ -721,78 +709,6 @@ $.extend( $.ui.dialog.overlay, {
$el.height( 0 ).width( 0 ).remove();
},
- height: function() {
- var scrollHeight,
- offsetHeight;
- // handle IE
- if ( $.ui.ie ) {
- scrollHeight = Math.max(
- document.documentElement.scrollHeight,
- document.body.scrollHeight
- );
- offsetHeight = Math.max(
- document.documentElement.offsetHeight,
- document.body.offsetHeight
- );
-
- if ( scrollHeight < offsetHeight ) {
- return $( window ).height() + "px";
- } else {
- return scrollHeight + "px";
- }
- // handle "good" browsers
- } else {
- return $( document ).height() + "px";
- }
- },
-
- width: function() {
- var scrollWidth,
- offsetWidth;
- // handle IE
- if ( $.ui.ie ) {
- scrollWidth = Math.max(
- document.documentElement.scrollWidth,
- document.body.scrollWidth
- );
- offsetWidth = Math.max(
- document.documentElement.offsetWidth,
- document.body.offsetWidth
- );
-
- if ( scrollWidth < offsetWidth ) {
- return $( window ).width() + "px";
- } else {
- return scrollWidth + "px";
- }
- // handle "good" browsers
- } else {
- return $( document ).width() + "px";
- }
- },
-
- resize: function() {
- /* If the dialog is draggable and the user drags it past the
- * right edge of the window, the document becomes wider so we
- * need to stretch the overlay. If the user then drags the
- * dialog back to the left, the document will become narrower,
- * so we need to shrink the overlay to the appropriate size.
- * This is handled by shrinking the overlay before setting it
- * to the full document size.
- */
- var $overlays = $( [] );
- $.each( $.ui.dialog.overlay.instances, function() {
- $overlays = $overlays.add( this );
- });
-
- $overlays.css({
- width: 0,
- height: 0
- }).css({
- width: $.ui.dialog.overlay.width(),
- height: $.ui.dialog.overlay.height()
- });
- }
});
$.extend( $.ui.dialog.overlay.prototype, {
Please sign in to comment.
Something went wrong with that request. Please try again.