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
);