diff --git a/core/client/assets/lib/jquery-utils.js b/core/client/assets/lib/jquery-utils.js index cdfe1475a2..1f81ea991f 100644 --- a/core/client/assets/lib/jquery-utils.js +++ b/core/client/assets/lib/jquery-utils.js @@ -23,18 +23,31 @@ * Center an element to the window vertically and centrally * @returns {*} */ - $.fn.center = function () { - this.css({ - 'position': 'fixed', - 'left': '50%', - 'top': '50%' + $.fn.center = function (options) { + var $window = $(window), + config = $.extend({ + animate : true, + successTrigger : 'centered' + }, options); + + return this.each(function () { + var $this = $(this); + $this.css({ + 'position': 'absolute' + }); + if (config.animate) { + $this.animate({ + 'left': ($window.width() / 2) - $this.outerWidth() / 2 + 'px', + 'top': ($window.height() / 2) - $this.outerHeight() / 2 + 'px' + }); + } else { + $this.css({ + 'left': ($window.width() / 2) - $this.outerWidth() / 2 + 'px', + 'top': ($window.height() / 2) - $this.outerHeight() / 2 + 'px' + }); + } + $(window).trigger(config.successTrigger); }); - this.css({ - 'margin-left': -this.outerWidth() / 2 + 'px', - 'margin-top': -this.outerHeight() / 2 + 'px' - }); - $(window).trigger('centered'); - return this; }; $.fn.selectText = function () { diff --git a/core/client/views/base.js b/core/client/views/base.js index 2ec95cf806..c34ae87052 100644 --- a/core/client/views/base.js +++ b/core/client/views/base.js @@ -254,7 +254,7 @@ }, afterRender: function () { this.$(".modal-content").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el); - this.$el.children(".js-modal").center().css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag + this.$el.children(".js-modal").center({animate: false}).css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag this.$el.addClass("active dark"); if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters