diff options
Diffstat (limited to 'js/src')
| -rw-r--r-- | js/src/modal.js | 32 |
1 files changed, 24 insertions, 8 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index bee5e23f8..e2b711e5b 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 // ---------------------------------------------------------------------- |