From 14e5fb04e9bf7c406b799b75b0427522d87a4ccb Mon Sep 17 00:00:00 2001 From: Heinrich Fenkart Date: Thu, 30 Oct 2014 04:46:14 +0100 Subject: [PATCH] Fix modal backdrop overlaying the modal's scrollbar Fixes #14916. --- js/modal.js | 18 ++++++++++++++++++ less/modals.less | 3 +-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/js/modal.js b/js/modal.js index 8b0e269bc1..eaf0d71656 100644 --- a/js/modal.js +++ b/js/modal.js @@ -60,6 +60,7 @@ this.setScrollbar() this.escape() + if (this.options.backdrop) this.resize() this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) @@ -74,6 +75,8 @@ .show() .scrollTop(0) + if (that.options.backdrop) that.setBackdropHeight() + if (transition) { that.$element[0].offsetWidth // force reflow } @@ -108,6 +111,7 @@ this.isShown = false this.escape() + if (this.options.backdrop) this.resize() $(document).off('focusin.bs.modal') @@ -143,6 +147,14 @@ } } + Modal.prototype.resize = function () { + if (this.isShown) { + $(window).on('resize.bs.modal', $.proxy(this.setBackdropHeight, this)) + } else { + $(window).off('resize.bs.modal') + } + } + Modal.prototype.hideModal = function () { var that = this this.$element.hide() @@ -204,6 +216,12 @@ } } + Modal.prototype.setBackdropHeight = function () { + this.$backdrop + .css('height', 0) + .css('height', this.$element[0].scrollHeight) + } + Modal.prototype.checkScrollbar = function () { this.scrollbarWidth = this.measureScrollbar() } diff --git a/less/modals.less b/less/modals.less index 7468b14f97..032a497d6c 100644 --- a/less/modals.less +++ b/less/modals.less @@ -62,10 +62,9 @@ // Modal background .modal-backdrop { - position: fixed; + position: absolute; top: 0; right: 0; - bottom: 0; left: 0; background-color: @modal-backdrop-bg; // Fade for backdrop