resources/jquery.ui/jquery.ui.dialog.js

   1 /*
   2  * jQuery UI Dialog 1.8.18
   3  *
   4  * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
   5  * Dual licensed under the MIT or GPL Version 2 licenses.
   6  * http://jquery.org/license
   7  *
   8  * http://docs.jquery.com/UI/Dialog
   9  *
  10  * Depends:
  11  *      jquery.ui.core.js
  12  *      jquery.ui.widget.js
  13  *  jquery.ui.button.js
  14  *      jquery.ui.draggable.js
  15  *      jquery.ui.mouse.js
  16  *      jquery.ui.position.js
  17  *      jquery.ui.resizable.js
  18  */
  19 (function( $, undefined ) {
  20
  21 var uiDialogClasses =
  22                 'ui-dialog ' +
  23                 'ui-widget ' +
  24                 'ui-widget-content ' +
  25                 'ui-corner-all ',
  26         sizeRelatedOptions = {
  27                 buttons: true,
  28                 height: true,
  29                 maxHeight: true,
  30                 maxWidth: true,
  31                 minHeight: true,
  32                 minWidth: true,
  33                 width: true
  34         },
  35         resizableRelatedOptions = {
  36                 maxHeight: true,
  37                 maxWidth: true,
  38                 minHeight: true,
  39                 minWidth: true
  40         },
  41         // support for jQuery 1.3.2 - handle common attrFn methods for dialog
  42         attrFn = $.attrFn || {
  43                 val: true,
  44                 css: true,
  45                 html: true,
  46                 text: true,
  47                 data: true,
  48                 width: true,
  49                 height: true,
  50                 offset: true,
  51                 click: true
  52         };
  53
  54 $.widget("ui.dialog", {
  55         options: {
  56                 autoOpen: true,
  57                 buttons: {},
  58                 closeOnEscape: true,
  59                 closeText: 'close',
  60                 dialogClass: '',
  61                 draggable: true,
  62                 hide: null,
  63                 height: 'auto',
  64                 maxHeight: false,
  65                 maxWidth: false,
  66                 minHeight: 150,
  67                 minWidth: 150,
  68                 modal: false,
  69                 position: {
  70                         my: 'center',
  71                         at: 'center',
  72                         collision: 'fit',
  73                         // ensure that the titlebar is never outside the document
  74                         using: function(pos) {
  75                                 var topOffset = $(this).css(pos).offset().top;
  76                                 if (topOffset < 0) {
  77                                         $(this).css('top', pos.top - topOffset);
  78                                 }
  79                         }
  80                 },
  81                 resizable: true,
  82                 show: null,
  83                 stack: true,
  84                 title: '',
  85                 width: 300,
  86                 zIndex: 1000
  87         },
  88
  89         _create: function() {
  90                 this.originalTitle = this.element.attr('title');
  91                 // #5742 - .attr() might return a DOMElement
  92                 if ( typeof this.originalTitle !== "string" ) {
  93                         this.originalTitle = "";
  94                 }
  95
  96                 this.options.title = this.options.title || this.originalTitle;
  97                 var self = this,
  98                         options = self.options,
  99
 100                         title = options.title || '&#160;',
 101                         titleId = $.ui.dialog.getTitleId(self.element),
 102
 103                         uiDialog = (self.uiDialog = $('<div></div>'))
 104                                 .appendTo(document.body)
 105                                 .hide()
 106                                 .addClass(uiDialogClasses + options.dialogClass)
 107                                 .css({
 108                                         zIndex: options.zIndex
 109                                 })
 110                                 // setting tabIndex makes the div focusable
 111                                 // setting outline to 0 prevents a border on focus in Mozilla
 112                                 .attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
 113                                         if (options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
 114                                                 event.keyCode === $.ui.keyCode.ESCAPE) {
 115
 116                                                 self.close(event);
 117                                                 event.preventDefault();
 118                                         }
 119                                 })
 120                                 .attr({
 121                                         role: 'dialog',
 122                                         'aria-labelledby': titleId
 123                                 })
 124                                 .mousedown(function(event) {
 125                                         self.moveToTop(false, event);
 126                                 }),
 127
 128                         uiDialogContent = self.element
 129                                 .show()
 130                                 .removeAttr('title')
 131                                 .addClass(
 132                                         'ui-dialog-content ' +
 133                                         'ui-widget-content')
 134                                 .appendTo(uiDialog),
 135
 136                         uiDialogTitlebar = (self.uiDialogTitlebar = $('<div></div>'))
 137                                 .addClass(
 138                                         'ui-dialog-titlebar ' +
 139                                         'ui-widget-header ' +
 140                                         'ui-corner-all ' +
 141                                         'ui-helper-clearfix'
 142                                 )
 143                                 .prependTo(uiDialog),
 144
 145                         uiDialogTitlebarClose = $('<a href="#"></a>')
 146                                 .addClass(
 147                                         'ui-dialog-titlebar-close ' +
 148                                         'ui-corner-all'
 149                                 )
 150                                 .attr('role', 'button')
 151                                 .hover(
 152                                         function() {
 153                                                 uiDialogTitlebarClose.addClass('ui-state-hover');
 154                                         },
 155                                         function() {
 156                                                 uiDialogTitlebarClose.removeClass('ui-state-hover');
 157                                         }
 158                                 )
 159                                 .focus(function() {
 160                                         uiDialogTitlebarClose.addClass('ui-state-focus');
 161                                 })
 162                                 .blur(function() {
 163                                         uiDialogTitlebarClose.removeClass('ui-state-focus');
 164                                 })
 165                                 .click(function(event) {
 166                                         self.close(event);
 167                                         return false;
 168                                 })
 169                                 .appendTo(uiDialogTitlebar),
 170
 171                         uiDialogTitlebarCloseText = (self.uiDialogTitlebarCloseText = $('<span></span>'))
 172                                 .addClass(
 173                                         'ui-icon ' +
 174                                         'ui-icon-closethick'
 175                                 )
 176                                 .text(options.closeText)
 177                                 .appendTo(uiDialogTitlebarClose),
 178
 179                         uiDialogTitle = $('<span></span>')
 180                                 .addClass('ui-dialog-title')
 181                                 .attr('id', titleId)
 182                                 .html(title)
 183                                 .prependTo(uiDialogTitlebar);
 184
 185                 //handling of deprecated beforeclose (vs beforeClose) option
 186                 //Ticket #4669 http://dev.jqueryui.com/ticket/4669
 187                 //TODO: remove in 1.9pre
 188                 if ($.isFunction(options.beforeclose) && !$.isFunction(options.beforeClose)) {
 189                         options.beforeClose = options.beforeclose;
 190                 }
 191
 192                 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
 193
 194                 if (options.draggable && $.fn.draggable) {
 195                         self._makeDraggable();
 196                 }
 197                 if (options.resizable && $.fn.resizable) {
 198                         self._makeResizable();
 199                 }
 200
 201                 self._createButtons(options.buttons);
 202                 self._isOpen = false;
 203
 204                 if ($.fn.bgiframe) {
 205                         uiDialog.bgiframe();
 206                 }
 207         },
 208
 209         _init: function() {
 210                 if ( this.options.autoOpen ) {
 211                         this.open();
 212                 }
 213         },
 214
 215         destroy: function() {
 216                 var self = this;
 217
 218                 if (self.overlay) {
 219                         self.overlay.destroy();
 220                 }
 221                 self.uiDialog.hide();
 222                 self.element
 223                         .unbind('.dialog')
 224                         .removeData('dialog')
 225                         .removeClass('ui-dialog-content ui-widget-content')
 226                         .hide().appendTo('body');
 227                 self.uiDialog.remove();
 228
 229                 if (self.originalTitle) {
 230                         self.element.attr('title', self.originalTitle);
 231                 }
 232
 233                 return self;
 234         },
 235
 236         widget: function() {
 237                 return this.uiDialog;
 238         },
 239
 240         close: function(event) {
 241                 var self = this,
 242                         maxZ, thisZ;
 243
 244                 if (false === self._trigger('beforeClose', event)) {
 245                         return;
 246                 }
 247
 248                 if (self.overlay) {
 249                         self.overlay.destroy();
 250                 }
 251                 self.uiDialog.unbind('keypress.ui-dialog');
 252
 253                 self._isOpen = false;
 254
 255                 if (self.options.hide) {
 256                         self.uiDialog.hide(self.options.hide, function() {
 257                                 self._trigger('close', event);
 258                         });
 259                 } else {
 260                         self.uiDialog.hide();
 261                         self._trigger('close', event);
 262                 }
 263
 264                 $.ui.dialog.overlay.resize();
 265
 266                 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
 267                 if (self.options.modal) {
 268                         maxZ = 0;
 269                         $('.ui-dialog').each(function() {
 270                                 if (this !== self.uiDialog[0]) {
 271                                         thisZ = $(this).css('z-index');
 272                                         if(!isNaN(thisZ)) {
 273                                                 maxZ = Math.max(maxZ, thisZ);
 274                                         }
 275                                 }
 276                         });
 277                         $.ui.dialog.maxZ = maxZ;
 278                 }
 279
 280                 return self;
 281         },
 282
 283         isOpen: function() {
 284                 return this._isOpen;
 285         },
 286
 287         // the force parameter allows us to move modal dialogs to their correct
 288         // position on open
 289         moveToTop: function(force, event) {
 290                 var self = this,
 291                         options = self.options,
 292                         saveScroll;
 293
 294                 if ((options.modal && !force) ||
 295                         (!options.stack && !options.modal)) {
 296                         return self._trigger('focus', event);
 297                 }
 298
 299                 if (options.zIndex > $.ui.dialog.maxZ) {
 300                         $.ui.dialog.maxZ = options.zIndex;
 301                 }
 302                 if (self.overlay) {
 303                         $.ui.dialog.maxZ += 1;
 304                         self.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = $.ui.dialog.maxZ);
 305                 }
 306
 307                 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.
 308                 //  http://ui.jquery.com/bugs/ticket/3193
 309                 saveScroll = { scrollTop: self.element.scrollTop(), scrollLeft: self.element.scrollLeft() };
 310                 $.ui.dialog.maxZ += 1;
 311                 self.uiDialog.css('z-index', $.ui.dialog.maxZ);
 312                 self.element.attr(saveScroll);
 313                 self._trigger('focus', event);
 314
 315                 return self;
 316         },
 317
 318         open: function() {
 319                 if (this._isOpen) { return; }
 320
 321                 var self = this,
 322                         options = self.options,
 323                         uiDialog = self.uiDialog;
 324
 325                 self.overlay = options.modal ? new $.ui.dialog.overlay(self) : null;
 326                 self._size();
 327                 self._position(options.position);
 328                 uiDialog.show(options.show);
 329                 self.moveToTop(true);
 330
 331                 // prevent tabbing out of modal dialogs
 332                 if ( options.modal ) {
 333                         uiDialog.bind( "keydown.ui-dialog", function( event ) {
 334                                 if ( event.keyCode !== $.ui.keyCode.TAB ) {
 335                                         return;
 336                                 }
 337
 338                                 var tabbables = $(':tabbable', this),
 339                                         first = tabbables.filter(':first'),
 340                                         last  = tabbables.filter(':last');
 341
 342                                 if (event.target === last[0] && !event.shiftKey) {
 343                                         first.focus(1);
 344                                         return false;
 345                                 } else if (event.target === first[0] && event.shiftKey) {
 346                                         last.focus(1);
 347                                         return false;
 348                                 }
 349                         });
 350                 }
 351
 352                 // set focus to the first tabbable element in the content area or the first button
 353                 // if there are no tabbable elements, set focus on the dialog itself
 354                 $(self.element.find(':tabbable').get().concat(
 355                         uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
 356                                 uiDialog.get()))).eq(0).focus();
 357
 358                 self._isOpen = true;
 359                 self._trigger('open');
 360
 361                 return self;
 362         },
 363
 364         _createButtons: function(buttons) {
 365                 var self = this,
 366                         hasButtons = false,
 367                         uiDialogButtonPane = $('<div></div>')
 368                                 .addClass(
 369                                         'ui-dialog-buttonpane ' +
 370                                         'ui-widget-content ' +
 371                                         'ui-helper-clearfix'
 372                                 ),
 373                         uiButtonSet = $( "<div></div>" )
 374                                 .addClass( "ui-dialog-buttonset" )
 375                                 .appendTo( uiDialogButtonPane );
 376
 377                 // if we already have a button pane, remove it
 378                 self.uiDialog.find('.ui-dialog-buttonpane').remove();
 379
 380                 if (typeof buttons === 'object' && buttons !== null) {
 381                         $.each(buttons, function() {
 382                                 return !(hasButtons = true);
 383                         });
 384                 }
 385                 if (hasButtons) {
 386                         $.each(buttons, function(name, props) {
 387                                 props = $.isFunction( props ) ?
 388                                         { click: props, text: name } :
 389                                         props;
 390                                 var button = $('<button type="button"></button>')
 391                                         .click(function() {
 392                                                 props.click.apply(self.element[0], arguments);
 393                                         })
 394                                         .appendTo(uiButtonSet);
 395                                 // can't use .attr( props, true ) with jQuery 1.3.2.
 396                                 $.each( props, function( key, value ) {
 397                                         if ( key === "click" ) {
 398                                                 return;
 399                                         }
 400                                         if ( key in attrFn ) {
 401                                                 button[ key ]( value );
 402                                         } else {
 403                                                 button.attr( key, value );
 404                                         }
 405                                 });
 406                                 if ($.fn.button) {
 407                                         button.button();
 408                                 }
 409                         });
 410                         uiDialogButtonPane.appendTo(self.uiDialog);
 411                 }
 412         },
 413
 414         _makeDraggable: function() {
 415                 var self = this,
 416                         options = self.options,
 417                         doc = $(document),
 418                         heightBeforeDrag;
 419
 420                 function filteredUi(ui) {
 421                         return {
 422                                 position: ui.position,
 423                                 offset: ui.offset
 424                         };
 425                 }
 426
 427                 self.uiDialog.draggable({
 428                         cancel: '.ui-dialog-content, .ui-dialog-titlebar-close',
 429                         handle: '.ui-dialog-titlebar',
 430                         containment: 'document',
 431                         start: function(event, ui) {
 432                                 heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height();
 433                                 $(this).height($(this).height()).addClass("ui-dialog-dragging");
 434                                 self._trigger('dragStart', event, filteredUi(ui));
 435                         },
 436                         drag: function(event, ui) {
 437                                 self._trigger('drag', event, filteredUi(ui));
 438                         },
 439                         stop: function(event, ui) {
 440                                 options.position = [ui.position.left - doc.scrollLeft(),
 441                                         ui.position.top - doc.scrollTop()];
 442                                 $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
 443                                 self._trigger('dragStop', event, filteredUi(ui));
 444                                 $.ui.dialog.overlay.resize();
 445                         }
 446                 });
 447         },
 448
 449         _makeResizable: function(handles) {
 450                 handles = (handles === undefined ? this.options.resizable : handles);
 451                 var self = this,
 452                         options = self.options,
 453                         // .ui-resizable has position: relative defined in the stylesheet
 454                         // but dialogs have to use absolute or fixed positioning
 455                         position = self.uiDialog.css('position'),
 456                         resizeHandles = (typeof handles === 'string' ?
 457                                 handles :
 458                                 'n,e,s,w,se,sw,ne,nw'
 459                         );
 460
 461                 function filteredUi(ui) {
 462                         return {
 463                                 originalPosition: ui.originalPosition,
 464                                 originalSize: ui.originalSize,
 465                                 position: ui.position,
 466                                 size: ui.size
 467                         };
 468                 }
 469
 470                 self.uiDialog.resizable({
 471                         cancel: '.ui-dialog-content',
 472                         containment: 'document',
 473                         alsoResize: self.element,
 474                         maxWidth: options.maxWidth,
 475                         maxHeight: options.maxHeight,
 476                         minWidth: options.minWidth,
 477                         minHeight: self._minHeight(),
 478                         handles: resizeHandles,
 479                         start: function(event, ui) {
 480                                 $(this).addClass("ui-dialog-resizing");
 481                                 self._trigger('resizeStart', event, filteredUi(ui));
 482                         },
 483                         resize: function(event, ui) {
 484                                 self._trigger('resize', event, filteredUi(ui));
 485                         },
 486                         stop: function(event, ui) {
 487                                 $(this).removeClass("ui-dialog-resizing");
 488                                 options.height = $(this).height();
 489                                 options.width = $(this).width();
 490                                 self._trigger('resizeStop', event, filteredUi(ui));
 491                                 $.ui.dialog.overlay.resize();
 492                         }
 493                 })
 494                 .css('position', position)
 495                 .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
 496         },
 497
 498         _minHeight: function() {
 499                 var options = this.options;
 500
 501                 if (options.height === 'auto') {
 502                         return options.minHeight;
 503                 } else {
 504                         return Math.min(options.minHeight, options.height);
 505                 }
 506         },
 507
 508         _position: function(position) {
 509                 var myAt = [],
 510                         offset = [0, 0],
 511                         isVisible;
 512
 513                 if (position) {
 514                         // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
 515         //              if (typeof position == 'string' || $.isArray(position)) {
 516         //                      myAt = $.isArray(position) ? position : position.split(' ');
 517
 518                         if (typeof position === 'string' || (typeof position === 'object' && '0' in position)) {
 519                                 myAt = position.split ? position.split(' ') : [position[0], position[1]];
 520                                 if (myAt.length === 1) {
 521                                         myAt[1] = myAt[0];
 522                                 }
 523
 524                                 $.each(['left', 'top'], function(i, offsetPosition) {
 525                                         if (+myAt[i] === myAt[i]) {
 526                                                 offset[i] = myAt[i];
 527                                                 myAt[i] = offsetPosition;
 528                                         }
 529                                 });
 530
 531                                 position = {
 532                                         my: myAt.join(" "),
 533                                         at: myAt.join(" "),
 534                                         offset: offset.join(" ")
 535                                 };
 536                         }
 537
 538                         position = $.extend({}, $.ui.dialog.prototype.options.position, position);
 539                 } else {
 540                         position = $.ui.dialog.prototype.options.position;
 541                 }
 542
 543                 // need to show the dialog to get the actual offset in the position plugin
 544                 isVisible = this.uiDialog.is(':visible');
 545                 if (!isVisible) {
 546                         this.uiDialog.show();
 547                 }
 548                 this.uiDialog
 549                         // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
 550                         .css({ top: 0, left: 0 })
 551                         .position($.extend({ of: window }, position));
 552                 if (!isVisible) {
 553                         this.uiDialog.hide();
 554                 }
 555         },
 556
 557         _setOptions: function( options ) {
 558                 var self = this,
 559                         resizableOptions = {},
 560                         resize = false;
 561
 562                 $.each( options, function( key, value ) {
 563                         self._setOption( key, value );
 564
 565                         if ( key in sizeRelatedOptions ) {
 566                                 resize = true;
 567                         }
 568                         if ( key in resizableRelatedOptions ) {
 569                                 resizableOptions[ key ] = value;
 570                         }
 571                 });
 572
 573                 if ( resize ) {
 574                         this._size();
 575                 }
 576                 if ( this.uiDialog.is( ":data(resizable)" ) ) {
 577                         this.uiDialog.resizable( "option", resizableOptions );
 578                 }
 579         },
 580
 581         _setOption: function(key, value){
 582                 var self = this,
 583                         uiDialog = self.uiDialog;
 584
 585                 switch (key) {
 586                         //handling of deprecated beforeclose (vs beforeClose) option
 587                         //Ticket #4669 http://dev.jqueryui.com/ticket/4669
 588                         //TODO: remove in 1.9pre
 589                         case "beforeclose":
 590                                 key = "beforeClose";
 591                                 break;
 592                         case "buttons":
 593                                 self._createButtons(value);
 594                                 break;
 595                         case "closeText":
 596                                 // ensure that we always pass a string
 597                                 self.uiDialogTitlebarCloseText.text("" + value);
 598                                 break;
 599                         case "dialogClass":
 600                                 uiDialog
 601                                         .removeClass(self.options.dialogClass)
 602                                         .addClass(uiDialogClasses + value);
 603                                 break;
 604                         case "disabled":
 605                                 if (value) {
 606                                         uiDialog.addClass('ui-dialog-disabled');
 607                                 } else {
 608                                         uiDialog.removeClass('ui-dialog-disabled');
 609                                 }
 610                                 break;
 611                         case "draggable":
 612                                 var isDraggable = uiDialog.is( ":data(draggable)" );
 613                                 if ( isDraggable && !value ) {
 614                                         uiDialog.draggable( "destroy" );
 615                                 }
 616
 617                                 if ( !isDraggable && value ) {
 618                                         self._makeDraggable();
 619                                 }
 620                                 break;
 621                         case "position":
 622                                 self._position(value);
 623                                 break;
 624                         case "resizable":
 625                                 // currently resizable, becoming non-resizable
 626                                 var isResizable = uiDialog.is( ":data(resizable)" );
 627                                 if (isResizable && !value) {
 628                                         uiDialog.resizable('destroy');
 629                                 }
 630
 631                                 // currently resizable, changing handles
 632                                 if (isResizable && typeof value === 'string') {
 633                                         uiDialog.resizable('option', 'handles', value);
 634                                 }
 635
 636                                 // currently non-resizable, becoming resizable
 637                                 if (!isResizable && value !== false) {
 638                                         self._makeResizable(value);
 639                                 }
 640                                 break;
 641                         case "title":
 642                                 // convert whatever was passed in o a string, for html() to not throw up
 643                                 $(".ui-dialog-title", self.uiDialogTitlebar).html("" + (value || '&#160;'));
 644                                 break;
 645                 }
 646
 647                 $.Widget.prototype._setOption.apply(self, arguments);
 648         },
 649
 650         _size: function() {
 651                 /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
 652                  * divs will both have width and height set, so we need to reset them
 653                  */
 654                 var options = this.options,
 655                         nonContentHeight,
 656                         minContentHeight,
 657                         isVisible = this.uiDialog.is( ":visible" );
 658
 659                 // reset content sizing
 660                 this.element.show().css({
 661                         width: 'auto',
 662                         minHeight: 0,
 663                         height: 0
 664                 });
 665
 666                 if (options.minWidth > options.width) {
 667                         options.width = options.minWidth;
 668                 }
 669
 670                 // reset wrapper sizing
 671                 // determine the height of all the non-content elements
 672                 nonContentHeight = this.uiDialog.css({
 673                                 height: 'auto',
 674                                 width: options.width
 675                         })
 676                         .height();
 677                 minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
 678
 679                 if ( options.height === "auto" ) {
 680                         // only needed for IE6 support
 681                         if ( $.support.minHeight ) {
 682                                 this.element.css({
 683                                         minHeight: minContentHeight,
 684                                         height: "auto"
 685                                 });
 686                         } else {
 687                                 this.uiDialog.show();
 688                                 var autoHeight = this.element.css( "height", "auto" ).height();
 689                                 if ( !isVisible ) {
 690                                         this.uiDialog.hide();
 691                                 }
 692                                 this.element.height( Math.max( autoHeight, minContentHeight ) );
 693                         }
 694                 } else {
 695                         this.element.height( Math.max( options.height - nonContentHeight, 0 ) );
 696                 }
 697
 698                 if (this.uiDialog.is(':data(resizable)')) {
 699                         this.uiDialog.resizable('option', 'minHeight', this._minHeight());
 700                 }
 701         }
 702 });
 703
 704 $.extend($.ui.dialog, {
 705         version: "1.8.18",
 706
 707         uuid: 0,
 708         maxZ: 0,
 709
 710         getTitleId: function($el) {
 711                 var id = $el.attr('id');
 712                 if (!id) {
 713                         this.uuid += 1;
 714                         id = this.uuid;
 715                 }
 716                 return 'ui-dialog-title-' + id;
 717         },
 718
 719         overlay: function(dialog) {
 720                 this.$el = $.ui.dialog.overlay.create(dialog);
 721         }
 722 });
 723
 724 $.extend($.ui.dialog.overlay, {
 725         instances: [],
 726         // reuse old instances due to IE memory leak with alpha transparency (see #5185)
 727         oldInstances: [],
 728         maxZ: 0,
 729         events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
 730                 function(event) { return event + '.dialog-overlay'; }).join(' '),
 731         create: function(dialog) {
 732                 if (this.instances.length === 0) {
 733                         // prevent use of anchors and inputs
 734                         // we use a setTimeout in case the overlay is created from an
 735                         // event that we're going to be cancelling (see #2804)
 736                         setTimeout(function() {
 737                                 // handle $(el).dialog().dialog('close') (see #4065)
 738                                 if ($.ui.dialog.overlay.instances.length) {
 739                                         $(document).bind($.ui.dialog.overlay.events, function(event) {
 740                                                 // stop events if the z-index of the target is < the z-index of the overlay
 741                                                 // we cannot return true when we don't want to cancel the event (#3523)
 742                                                 if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {
 743                                                         return false;
 744                                                 }
 745                                         });
 746                                 }
 747                         }, 1);
 748
 749                         // allow closing by pressing the escape key
 750                         $(document).bind('keydown.dialog-overlay', function(event) {
 751                                 if (dialog.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
 752                                         event.keyCode === $.ui.keyCode.ESCAPE) {
 753
 754                                         dialog.close(event);
 755                                         event.preventDefault();
 756                                 }
 757                         });
 758
 759                         // handle window resize
 760                         $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
 761                 }
 762
 763                 var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
 764                         .appendTo(document.body)
 765                         .css({
 766                                 width: this.width(),
 767                                 height: this.height()
 768                         });
 769
 770                 if ($.fn.bgiframe) {
 771                         $el.bgiframe();
 772                 }
 773
 774                 this.instances.push($el);
 775                 return $el;
 776         },
 777
 778         destroy: function($el) {
 779                 var indexOf = $.inArray($el, this.instances);
 780                 if (indexOf != -1){
 781                         this.oldInstances.push(this.instances.splice(indexOf, 1)[0]);
 782                 }
 783
 784                 if (this.instances.length === 0) {
 785                         $([document, window]).unbind('.dialog-overlay');
 786                 }
 787
 788                 $el.remove();
 789
 790                 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
 791                 var maxZ = 0;
 792                 $.each(this.instances, function() {
 793                         maxZ = Math.max(maxZ, this.css('z-index'));
 794                 });
 795                 this.maxZ = maxZ;
 796         },
 797
 798         height: function() {
 799                 var scrollHeight,
 800                         offsetHeight;
 801                 // handle IE 6
 802                 if ($.browser.msie && $.browser.version < 7) {
 803                         scrollHeight = Math.max(
 804                                 document.documentElement.scrollHeight,
 805                                 document.body.scrollHeight
 806                         );
 807                         offsetHeight = Math.max(
 808                                 document.documentElement.offsetHeight,
 809                                 document.body.offsetHeight
 810                         );
 811
 812                         if (scrollHeight < offsetHeight) {
 813                                 return $(window).height() + 'px';
 814                         } else {
 815                                 return scrollHeight + 'px';
 816                         }
 817                 // handle "good" browsers
 818                 } else {
 819                         return $(document).height() + 'px';
 820                 }
 821         },
 822
 823         width: function() {
 824                 var scrollWidth,
 825                         offsetWidth;
 826                 // handle IE
 827                 if ( $.browser.msie ) {
 828                         scrollWidth = Math.max(
 829                                 document.documentElement.scrollWidth,
 830                                 document.body.scrollWidth
 831                         );
 832                         offsetWidth = Math.max(
 833                                 document.documentElement.offsetWidth,
 834                                 document.body.offsetWidth
 835                         );
 836
 837                         if (scrollWidth < offsetWidth) {
 838                                 return $(window).width() + 'px';
 839                         } else {
 840                                 return scrollWidth + 'px';
 841                         }
 842                 // handle "good" browsers
 843                 } else {
 844                         return $(document).width() + 'px';
 845                 }
 846         },
 847
 848         resize: function() {
 849                 /* If the dialog is draggable and the user drags it past the
 850                  * right edge of the window, the document becomes wider so we
 851                  * need to stretch the overlay. If the user then drags the
 852                  * dialog back to the left, the document will become narrower,
 853                  * so we need to shrink the overlay to the appropriate size.
 854                  * This is handled by shrinking the overlay before setting it
 855                  * to the full document size.
 856                  */
 857                 var $overlays = $([]);
 858                 $.each($.ui.dialog.overlay.instances, function() {
 859                         $overlays = $overlays.add(this);
 860                 });
 861
 862                 $overlays.css({
 863                         width: 0,
 864                         height: 0
 865                 }).css({
 866                         width: $.ui.dialog.overlay.width(),
 867                         height: $.ui.dialog.overlay.height()
 868                 });
 869         }
 870 });
 871
 872 $.extend($.ui.dialog.overlay.prototype, {
 873         destroy: function() {
 874                 $.ui.dialog.overlay.destroy(this.$el);
 875         }
 876 });
 877
 878 }(jQuery));