2 * jQuery UI Dialog 1.8.2
4 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT (MIT-LICENSE.txt)
6 * and GPL (GPL-LICENSE.txt) licenses.
8 * http://docs.jquery.com/UI/Dialog
14 * jquery.ui.draggable.js
16 * jquery.ui.position.js
17 * jquery.ui.resizable.js
24 'ui-widget-content ' +
27 $.widget("ui.dialog", {
51 this.originalTitle = this.element.attr('title');
54 options = self.options,
56 title = options.title || self.originalTitle || ' ',
57 titleId = $.ui.dialog.getTitleId(self.element),
59 uiDialog = (self.uiDialog = $('<div></div>'))
60 .appendTo(document.body)
62 .addClass(uiDialogClasses + options.dialogClass)
64 zIndex: options.zIndex
66 // setting tabIndex makes the div focusable
67 // setting outline to 0 prevents a border on focus in Mozilla
68 .attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
69 if (options.closeOnEscape && event.keyCode &&
70 event.keyCode === $.ui.keyCode.ESCAPE) {
73 event.preventDefault();
78 'aria-labelledby': titleId
80 .mousedown(function(event) {
81 self.moveToTop(false, event);
84 uiDialogContent = self.element
88 'ui-dialog-content ' +
92 uiDialogTitlebar = (self.uiDialogTitlebar = $('<div></div>'))
94 'ui-dialog-titlebar ' +
101 uiDialogTitlebarClose = $('<a href="#"></a>')
103 'ui-dialog-titlebar-close ' +
106 .attr('role', 'button')
109 uiDialogTitlebarClose.addClass('ui-state-hover');
112 uiDialogTitlebarClose.removeClass('ui-state-hover');
116 uiDialogTitlebarClose.addClass('ui-state-focus');
119 uiDialogTitlebarClose.removeClass('ui-state-focus');
121 .click(function(event) {
125 .appendTo(uiDialogTitlebar),
127 uiDialogTitlebarCloseText = (self.uiDialogTitlebarCloseText = $('<span></span>'))
132 .text(options.closeText)
133 .appendTo(uiDialogTitlebarClose),
135 uiDialogTitle = $('<span></span>')
136 .addClass('ui-dialog-title')
139 .prependTo(uiDialogTitlebar);
141 //handling of deprecated beforeclose (vs beforeClose) option
142 //Ticket #4669 http://dev.jqueryui.com/ticket/4669
143 //TODO: remove in 1.9pre
144 if ($.isFunction(options.beforeclose) && !$.isFunction(options.beforeClose)) {
145 options.beforeClose = options.beforeclose;
148 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
150 if (options.draggable && $.fn.draggable) {
151 self._makeDraggable();
153 if (options.resizable && $.fn.resizable) {
154 self._makeResizable();
157 self._createButtons(options.buttons);
158 self._isOpen = false;
165 if ( this.options.autoOpen ) {
170 destroy: function() {
174 self.overlay.destroy();
176 self.uiDialog.hide();
179 .removeData('dialog')
180 .removeClass('ui-dialog-content ui-widget-content')
181 .hide().appendTo('body');
182 self.uiDialog.remove();
184 if (self.originalTitle) {
185 self.element.attr('title', self.originalTitle);
192 return this.uiDialog;
195 close: function(event) {
199 if (false === self._trigger('beforeClose', event)) {
204 self.overlay.destroy();
206 self.uiDialog.unbind('keypress.ui-dialog');
208 self._isOpen = false;
210 if (self.options.hide) {
211 self.uiDialog.hide(self.options.hide, function() {
212 self._trigger('close', event);
215 self.uiDialog.hide();
216 self._trigger('close', event);
219 $.ui.dialog.overlay.resize();
221 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
222 if (self.options.modal) {
224 $('.ui-dialog').each(function() {
225 if (this !== self.uiDialog[0]) {
226 maxZ = Math.max(maxZ, $(this).css('z-index'));
229 $.ui.dialog.maxZ = maxZ;
239 // the force parameter allows us to move modal dialogs to their correct
241 moveToTop: function(force, event) {
243 options = self.options,
246 if ((options.modal && !force) ||
247 (!options.stack && !options.modal)) {
248 return self._trigger('focus', event);
251 if (options.zIndex > $.ui.dialog.maxZ) {
252 $.ui.dialog.maxZ = options.zIndex;
255 $.ui.dialog.maxZ += 1;
256 self.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = $.ui.dialog.maxZ);
259 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.
260 // http://ui.jquery.com/bugs/ticket/3193
261 saveScroll = { scrollTop: self.element.attr('scrollTop'), scrollLeft: self.element.attr('scrollLeft') };
262 $.ui.dialog.maxZ += 1;
263 self.uiDialog.css('z-index', $.ui.dialog.maxZ);
264 self.element.attr(saveScroll);
265 self._trigger('focus', event);
271 if (this._isOpen) { return; }
274 options = self.options,
275 uiDialog = self.uiDialog;
277 self.overlay = options.modal ? new $.ui.dialog.overlay(self) : null;
278 if (uiDialog.next().length) {
279 uiDialog.appendTo('body');
282 self._position(options.position);
283 uiDialog.show(options.show);
284 self.moveToTop(true);
286 // prevent tabbing out of modal dialogs
288 uiDialog.bind('keypress.ui-dialog', function(event) {
289 if (event.keyCode !== $.ui.keyCode.TAB) {
293 var tabbables = $(':tabbable', this),
294 first = tabbables.filter(':first'),
295 last = tabbables.filter(':last');
297 if (event.target === last[0] && !event.shiftKey) {
300 } else if (event.target === first[0] && event.shiftKey) {
307 // set focus to the first tabbable element in the content area or the first button
308 // if there are no tabbable elements, set focus on the dialog itself
310 .add(uiDialog.find('.ui-dialog-content :tabbable:first'))
311 .add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
316 self._trigger('open');
322 _createButtons: function(buttons) {
325 uiDialogButtonPane = $('<div></div>')
327 'ui-dialog-buttonpane ' +
328 'ui-widget-content ' +
332 // if we already have a button pane, remove it
333 self.uiDialog.find('.ui-dialog-buttonpane').remove();
335 if (typeof buttons === 'object' && buttons !== null) {
336 $.each(buttons, function() {
337 return !(hasButtons = true);
341 $.each(buttons, function(name, fn) {
342 var button = $('<button type="button"></button>')
344 .click(function() { fn.apply(self.element[0], arguments); })
345 .appendTo(uiDialogButtonPane);
350 uiDialogButtonPane.appendTo(self.uiDialog);
354 _makeDraggable: function() {
356 options = self.options,
360 function filteredUi(ui) {
362 position: ui.position,
367 self.uiDialog.draggable({
368 cancel: '.ui-dialog-content, .ui-dialog-titlebar-close',
369 handle: '.ui-dialog-titlebar',
370 containment: 'document',
371 start: function(event, ui) {
372 heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height();
373 $(this).height($(this).height()).addClass("ui-dialog-dragging");
374 self._trigger('dragStart', event, filteredUi(ui));
376 drag: function(event, ui) {
377 self._trigger('drag', event, filteredUi(ui));
379 stop: function(event, ui) {
380 options.position = [ui.position.left - doc.scrollLeft(),
381 ui.position.top - doc.scrollTop()];
382 $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
383 self._trigger('dragStop', event, filteredUi(ui));
384 $.ui.dialog.overlay.resize();
389 _makeResizable: function(handles) {
390 handles = (handles === undefined ? this.options.resizable : handles);
392 options = self.options,
393 // .ui-resizable has position: relative defined in the stylesheet
394 // but dialogs have to use absolute or fixed positioning
395 position = self.uiDialog.css('position'),
396 resizeHandles = (typeof handles === 'string' ?
398 'n,e,s,w,se,sw,ne,nw'
401 function filteredUi(ui) {
403 originalPosition: ui.originalPosition,
404 originalSize: ui.originalSize,
405 position: ui.position,
410 self.uiDialog.resizable({
411 cancel: '.ui-dialog-content',
412 containment: 'document',
413 alsoResize: self.element,
414 maxWidth: options.maxWidth,
415 maxHeight: options.maxHeight,
416 minWidth: options.minWidth,
417 minHeight: self._minHeight(),
418 handles: resizeHandles,
419 start: function(event, ui) {
420 $(this).addClass("ui-dialog-resizing");
421 self._trigger('resizeStart', event, filteredUi(ui));
423 resize: function(event, ui) {
424 self._trigger('resize', event, filteredUi(ui));
426 stop: function(event, ui) {
427 $(this).removeClass("ui-dialog-resizing");
428 options.height = $(this).height();
429 options.width = $(this).width();
430 self._trigger('resizeStop', event, filteredUi(ui));
431 $.ui.dialog.overlay.resize();
434 .css('position', position)
435 .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
438 _minHeight: function() {
439 var options = this.options;
441 if (options.height === 'auto') {
442 return options.minHeight;
444 return Math.min(options.minHeight, options.height);
448 _position: function(position) {
453 position = position || $.ui.dialog.prototype.options.position;
455 // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
456 // if (typeof position == 'string' || $.isArray(position)) {
457 // myAt = $.isArray(position) ? position : position.split(' ');
459 if (typeof position === 'string' || (typeof position === 'object' && '0' in position)) {
460 myAt = position.split ? position.split(' ') : [position[0], position[1]];
461 if (myAt.length === 1) {
465 $.each(['left', 'top'], function(i, offsetPosition) {
466 if (+myAt[i] === myAt[i]) {
468 myAt[i] = offsetPosition;
471 } else if (typeof position === 'object') {
472 if ('left' in position) {
474 offset[0] = position.left;
475 } else if ('right' in position) {
477 offset[0] = -position.right;
480 if ('top' in position) {
482 offset[1] = position.top;
483 } else if ('bottom' in position) {
485 offset[1] = -position.bottom;
489 // need to show the dialog to get the actual offset in the position plugin
490 isVisible = this.uiDialog.is(':visible');
492 this.uiDialog.show();
495 // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
496 .css({ top: 0, left: 0 })
500 offset: offset.join(' '),
503 // ensure that the titlebar is never outside the document
504 using: function(pos) {
505 var topOffset = $(this).css(pos).offset().top;
507 $(this).css('top', pos.top - topOffset);
512 this.uiDialog.hide();
516 _setOption: function(key, value){
518 uiDialog = self.uiDialog,
519 isResizable = uiDialog.is(':data(resizable)'),
523 //handling of deprecated beforeclose (vs beforeClose) option
524 //Ticket #4669 http://dev.jqueryui.com/ticket/4669
525 //TODO: remove in 1.9pre
530 self._createButtons(value);
533 // convert whatever was passed in to a string, for text() to not throw up
534 self.uiDialogTitlebarCloseText.text("" + value);
538 .removeClass(self.options.dialogClass)
539 .addClass(uiDialogClasses + value);
543 uiDialog.addClass('ui-dialog-disabled');
545 uiDialog.removeClass('ui-dialog-disabled');
550 self._makeDraggable();
552 uiDialog.draggable('destroy');
560 uiDialog.resizable('option', 'maxHeight', value);
566 uiDialog.resizable('option', 'maxWidth', value);
572 uiDialog.resizable('option', 'minHeight', value);
578 uiDialog.resizable('option', 'minWidth', value);
583 self._position(value);
586 // currently resizable, becoming non-resizable
587 if (isResizable && !value) {
588 uiDialog.resizable('destroy');
591 // currently resizable, changing handles
592 if (isResizable && typeof value === 'string') {
593 uiDialog.resizable('option', 'handles', value);
596 // currently non-resizable, becoming resizable
597 if (!isResizable && value !== false) {
598 self._makeResizable(value);
602 // convert whatever was passed in o a string, for html() to not throw up
603 $(".ui-dialog-title", self.uiDialogTitlebar).html("" + (value || ' '));
610 $.Widget.prototype._setOption.apply(self, arguments);
617 /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
618 * divs will both have width and height set, so we need to reset them
620 var options = this.options,
623 // reset content sizing
624 // hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350)
631 // reset wrapper sizing
632 // determine the height of all the non-content elements
633 nonContentHeight = this.uiDialog.css({
640 .css(options.height === 'auto' ? {
641 minHeight: Math.max(options.minHeight - nonContentHeight, 0),
645 height: Math.max(options.height - nonContentHeight, 0)
649 if (this.uiDialog.is(':data(resizable)')) {
650 this.uiDialog.resizable('option', 'minHeight', this._minHeight());
655 $.extend($.ui.dialog, {
661 getTitleId: function($el) {
662 var id = $el.attr('id');
667 return 'ui-dialog-title-' + id;
670 overlay: function(dialog) {
671 this.$el = $.ui.dialog.overlay.create(dialog);
675 $.extend($.ui.dialog.overlay, {
677 // reuse old instances due to IE memory leak with alpha transparency (see #5185)
680 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
681 function(event) { return event + '.dialog-overlay'; }).join(' '),
682 create: function(dialog) {
683 if (this.instances.length === 0) {
684 // prevent use of anchors and inputs
685 // we use a setTimeout in case the overlay is created from an
686 // event that we're going to be cancelling (see #2804)
687 setTimeout(function() {
688 // handle $(el).dialog().dialog('close') (see #4065)
689 if ($.ui.dialog.overlay.instances.length) {
690 $(document).bind($.ui.dialog.overlay.events, function(event) {
691 // stop events if the z-index of the target is < the z-index of the overlay
692 return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);
697 // allow closing by pressing the escape key
698 $(document).bind('keydown.dialog-overlay', function(event) {
699 if (dialog.options.closeOnEscape && event.keyCode &&
700 event.keyCode === $.ui.keyCode.ESCAPE) {
703 event.preventDefault();
707 // handle window resize
708 $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
711 var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
712 .appendTo(document.body)
715 height: this.height()
722 this.instances.push($el);
726 destroy: function($el) {
727 this.oldInstances.push(this.instances.splice($.inArray($el, this.instances), 1)[0]);
729 if (this.instances.length === 0) {
730 $([document, window]).unbind('.dialog-overlay');
735 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
737 $.each(this.instances, function() {
738 maxZ = Math.max(maxZ, this.css('z-index'));
747 if ($.browser.msie && $.browser.version < 7) {
748 scrollHeight = Math.max(
749 document.documentElement.scrollHeight,
750 document.body.scrollHeight
752 offsetHeight = Math.max(
753 document.documentElement.offsetHeight,
754 document.body.offsetHeight
757 if (scrollHeight < offsetHeight) {
758 return $(window).height() + 'px';
760 return scrollHeight + 'px';
762 // handle "good" browsers
764 return $(document).height() + 'px';
772 if ($.browser.msie && $.browser.version < 7) {
773 scrollWidth = Math.max(
774 document.documentElement.scrollWidth,
775 document.body.scrollWidth
777 offsetWidth = Math.max(
778 document.documentElement.offsetWidth,
779 document.body.offsetWidth
782 if (scrollWidth < offsetWidth) {
783 return $(window).width() + 'px';
785 return scrollWidth + 'px';
787 // handle "good" browsers
789 return $(document).width() + 'px';
794 /* If the dialog is draggable and the user drags it past the
795 * right edge of the window, the document becomes wider so we
796 * need to stretch the overlay. If the user then drags the
797 * dialog back to the left, the document will become narrower,
798 * so we need to shrink the overlay to the appropriate size.
799 * This is handled by shrinking the overlay before setting it
800 * to the full document size.
802 var $overlays = $([]);
803 $.each($.ui.dialog.overlay.instances, function() {
804 $overlays = $overlays.add(this);
811 width: $.ui.dialog.overlay.width(),
812 height: $.ui.dialog.overlay.height()
817 $.extend($.ui.dialog.overlay.prototype, {
818 destroy: function() {
819 $.ui.dialog.overlay.destroy(this.$el);