diff --git a/js/src/modal.js b/js/src/modal.js index 0d15041bd..8c6617650 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -409,10 +409,23 @@ class Modal { return } + const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight + + if (!isModalOverflowing) { + this._element.style.overflowY = 'hidden' + } + this._element.classList.add(CLASS_NAME_STATIC) - const modalTransitionDuration = getTransitionDurationFromElement(this._element) + const modalTransitionDuration = getTransitionDurationFromElement(this._dialog) + EventHandler.off(this._element, TRANSITION_END) EventHandler.one(this._element, TRANSITION_END, () => { this._element.classList.remove(CLASS_NAME_STATIC) + if (!isModalOverflowing) { + EventHandler.one(this._element, TRANSITION_END, () => { + this._element.style.overflowY = '' + }) + emulateTransitionEnd(this._element, modalTransitionDuration) + } }) emulateTransitionEnd(this._element, modalTransitionDuration) this._element.focus() diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index afb8f2c2d..253f93513 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -626,6 +626,25 @@ describe('Modal', () => { modal.show() }) + it('should not overflow when clicking outside of modal-content if backdrop = static', done => { + fixtureEl.innerHTML = '