diff options
| -rw-r--r-- | demos/dialog/modal-form.html | 4 | ||||
| -rw-r--r-- | demos/dialog/modal-message.html | 4 | ||||
| -rw-r--r-- | demos/dialog/modal.html | 6 | ||||
| -rw-r--r-- | ui/ui.dialog.js | 41 |
4 files changed, 37 insertions, 18 deletions
diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index 217e8c3c6..c024f7ed4 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -21,10 +21,6 @@ bgiframe: true, height: 300, modal: true, - overlay: { - backgroundColor: '#000', - opacity: 0.5 - }, buttons: { 'Create user account': function() { $(this).dialog('close'); diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index 6052ac155..a0a039f85 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -15,10 +15,6 @@ $("#dialog").dialog({ bgiframe: true, modal: true, - overlay: { - backgroundColor: '#000', - opacity: 0.5 - }, buttons: { Ok: function() { $(this).dialog('close'); diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index f3e7013a5..ffe43d4f1 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -15,11 +15,7 @@ $("#dialog").dialog({ bgiframe: true, height: 140, - modal: true, - overlay: { - backgroundColor: '#000', - opacity: 0.5 - } + modal: true }); }); </script> diff --git a/ui/ui.dialog.js b/ui/ui.dialog.js index 69ca3205c..e3b5bd1bc 100644 --- a/ui/ui.dialog.js +++ b/ui/ui.dialog.js @@ -137,10 +137,12 @@ $.widget("ui.dialog", { (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe()); (options.autoOpen && this.open()); + }, destroy: function() { (this.overlay && this.overlay.destroy()); + (this.shadow && this._destroyShadow()); this.uiDialog.hide(); this.element .unbind('.dialog') @@ -158,6 +160,7 @@ $.widget("ui.dialog", { } (this.overlay && this.overlay.destroy()); + (this.shadow && this._destroyShadow()); this.uiDialog .hide(this.options.hide) .unbind('keypress.ui-dialog'); @@ -186,6 +189,7 @@ $.widget("ui.dialog", { maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex); }); (this.overlay && this.overlay.$el.css('z-index', ++maxZ)); + (this.shadow && this.shadow.css('z-index', ++maxZ)); //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. // http://ui.jquery.com/bugs/ticket/3193 @@ -240,6 +244,9 @@ $.widget("ui.dialog", { .filter(':first') .focus(); + if(options.shadow) + this._createShadow(); + this._trigger('open'); this._isOpen = true; }, @@ -302,10 +309,12 @@ $.widget("ui.dialog", { }, drag: function() { (options.drag && options.drag.apply(self.element[0], arguments)); + self._refreshShadow(); }, stop: function() { (options.dragStop && options.dragStop.apply(self.element[0], arguments)); $.ui.dialog.overlay.resize(); + self._refreshShadow(); } }); }, @@ -331,11 +340,13 @@ $.widget("ui.dialog", { }, resize: function() { (options.resize && options.resize.apply(self.element[0], arguments)); + self._refreshShadow(); }, handles: resizeHandles, stop: function() { (options.resizeStop && options.resizeStop.apply(self.element[0], arguments)); $.ui.dialog.overlay.resize(); + self._refreshShadow(); } }) .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se'); @@ -466,7 +477,29 @@ $.widget("ui.dialog", { ? 'auto' : options.height - nonContentHeight }); + }, + + _createShadow: function() { + this.shadow = $('<div class="ui-widget-shadow"></div>').css('position', 'absolute').appendTo(document.body); + this._refreshShadow(); + return this.shadow; + }, + + _refreshShadow: function() { + var offset = this.uiDialog.offset(); + this.shadow.css({ + left: offset.left, + top: offset.top, + width: this.uiDialog.outerWidth(), + height: this.uiDialog.outerHeight() + }); + }, + + _destroyShadow: function() { + this.shadow.remove(); + this.shadow = null; } + }); $.extend($.ui.dialog, { @@ -482,9 +515,9 @@ $.extend($.ui.dialog, { minHeight: 150, minWidth: 150, modal: false, - overlay: {}, position: 'center', resizable: true, + shadow: true, stack: true, title: '', width: 300, @@ -547,12 +580,10 @@ $.extend($.ui.dialog.overlay, { } var $el = $('<div></div>').appendTo(document.body) - .addClass('ui-dialog-overlay').css($.extend({ - borderWidth: 0, margin: 0, padding: 0, - position: 'absolute', top: 0, left: 0, + .addClass('ui-widget-overlay').css({ width: this.width(), height: this.height() - }, dialog.options.overlay)); + }); (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe()); |