mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 21:40:48 +00:00
Code Issues Projects Releases Wiki Activity

Prevent overflowing static backdrop modal animation (#30326)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Shohei Yoshida 2020-06-25 17:35:53 +09:00 committed by GitHub
parent 9f173aeff3
commit fb4efb49ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/src/modal.js
View File

@ -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()

19
js/tests/unit/modal.spec.js
View File

@ -626,6 +626,25 @@ describe('Modal', () => {
modal.show()
})
it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
backdrop: 'static'
})
modalEl.addEventListener('shown.bs.modal', () => {
modalEl.click()
setTimeout(() => {
expect(modalEl.clientHeight === modalEl.scrollHeight).toEqual(true)
done()
}, 20)
})
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></div>'