Added animation when modal backdrop is static (#29516)

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
   // ----------------------------------------------------------------------

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 = '<div class="modal" data-backdrop="static" ><div class="modal-dialog" /></div>'
+
+      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 = '<div class="modal"><div class="modal-dialog" /></div>'