diff --git a/js/src/modal.js b/js/src/modal.js index b220bfa94584b1624787b3d2a027908bd83c2cfa..4309cbd9a23eedce83b04fb8c75cc7718c8a5ad6 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -365,7 +365,11 @@ class Modal { return } - this._triggerBackdropTransition() + if (this._config.backdrop === 'static') { + this._triggerBackdropTransition() + } else { + this.hide() + } }) if (animate) { @@ -404,35 +408,31 @@ class Modal { } _triggerBackdropTransition() { - if (this._config.backdrop === 'static') { - const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) - if (hideEvent.defaultPrevented) { - return - } + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) + if (hideEvent.defaultPrevented) { + return + } - const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight + 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._dialog) + EventHandler.off(this._element, TRANSITION_END) + EventHandler.one(this._element, TRANSITION_END, () => { + this._element.classList.remove(CLASS_NAME_STATIC) if (!isModalOverflowing) { - this._element.style.overflowY = 'hidden' + EventHandler.one(this._element, TRANSITION_END, () => { + this._element.style.overflowY = '' + }) + emulateTransitionEnd(this._element, modalTransitionDuration) } - - this._element.classList.add(CLASS_NAME_STATIC) - 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() - } else { - this.hide() - } + }) + emulateTransitionEnd(this._element, modalTransitionDuration) + this._element.focus() } // ---------------------------------------------------------------------- diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index b9640097a95d2e907a638e29c0e5e2c53d5fcb0b..2a73194177332d5ca484fce28841e3efbd2912b0 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -595,12 +595,11 @@ describe('Modal', () => { modal.show() }) - it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => { - fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>' + it('should not close modal when escape key is pressed with keyboard = false', done => { + fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { - backdrop: 'static', keyboard: false })