diff --git a/js/src/modal.js b/js/src/modal.js index bee5e23f88..e2b711e5be 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -50,6 +50,7 @@ const DefaultType = { const Event = { HIDE: `hide${EVENT_KEY}`, + HIDE_PREVENTED: `hidePrevented${EVENT_KEY}`, HIDDEN: `hidden${EVENT_KEY}`, SHOW: `show${EVENT_KEY}`, SHOWN: `shown${EVENT_KEY}`, @@ -68,7 +69,8 @@ const ClassName = { BACKDROP: 'modal-backdrop', OPEN: 'modal-open', FADE: 'fade', - SHOW: 'show' + SHOW: 'show', + STATIC: 'modal-static' } const Selector = { @@ -307,8 +309,7 @@ class Modal { if (this._isShown && this._config.keyboard) { EventHandler.on(this._element, Event.KEYDOWN_DISMISS, event => { if (event.which === ESCAPE_KEYCODE) { - event.preventDefault() - this.hide() + this._triggerBackdropTransition() } }) } else { @@ -367,11 +368,7 @@ class Modal { return } - if (this._config.backdrop === 'static') { - this._element.focus() - } else { - this.hide() - } + this._triggerBackdropTransition() }) if (animate) { @@ -409,6 +406,25 @@ class Modal { } } + _triggerBackdropTransition() { + if (this._config.backdrop === 'static') { + const hideEvent = EventHandler.trigger(this._element, Event.HIDE_PREVENTED) + if (hideEvent.defaultPrevented) { + return + } + + this._element.classList.add(ClassName.STATIC) + const modalTransitionDuration = getTransitionDurationFromElement(this._element) + EventHandler.one(this._element, TRANSITION_END, () => { + this._element.classList.remove(ClassName.STATIC) + }) + emulateTransitionEnd(this._element, modalTransitionDuration) + this._element.focus() + } else { + this.hide() + } + } + // ---------------------------------------------------------------------- // the following methods are used to handle overflowing modals // ---------------------------------------------------------------------- diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 604934785a..2edef22b2c 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -540,6 +540,33 @@ describe('Modal', () => { modal.show() }) + it('should not close modal when clicking outside of modal-content if backdrop = static', done => { + fixtureEl.innerHTML = '
' + + const modalEl = fixtureEl.querySelector('.modal') + const modal = new Modal(modalEl, { + backdrop: 'static' + }) + + const shownCallback = () => { + setTimeout(() => { + expect(modal._isShown).toEqual(true) + done() + }, 10) + } + + modalEl.addEventListener('shown.bs.modal', () => { + modalEl.click() + shownCallback() + }) + + modalEl.addEventListener('hidden.bs.modal', () => { + throw new Error('Should not hide a modal') + }) + + modal.show() + }) + it('should not adjust the inline body padding when it does not overflow', done => { fixtureEl.innerHTML = '
' diff --git a/scss/_modal.scss b/scss/_modal.scss index 6001d040dd..381b0685e5 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -48,6 +48,11 @@ .modal.show & { transform: $modal-show-transform; } + + // When trying to close, animate focus to scale + .modal.modal-static & { + transform: $modal-scale-transform; + } } .modal-dialog-scrollable { diff --git a/scss/_variables.scss b/scss/_variables.scss index b4dff2cf59..1adc5f5a08 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1073,6 +1073,7 @@ $modal-sm: 300px !default; $modal-fade-transform: translate(0, -50px) !default; $modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; +$modal-scale-transform: scale(1.02) !default; // Alerts diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index f82ee774e5..fd1a04a621 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -140,6 +140,65 @@ Toggle a working modal demo by clicking the button below. It will slide down and
{{< /highlight >}} +### Static backdrop + +When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. + + + +
+ +
+ +{{< highlight html >}} + + + + + +{{< /highlight >}} + + ### Scrolling long content When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. @@ -753,7 +812,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap backdrop boolean or the string 'static' true - Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. + Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click or on escape key press. keyboard @@ -859,6 +918,10 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). + + hidePrevented.bs.modal + This event is fired when the modal is shown, its backdrop is static and a click outside the modal or a scape key press is performed. +