mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Always modal scroll top to 0

Browse Source
This commit is contained in:
ysds
2020-03-04 23:51:15 +09:00
committed by XhmikosR
parent 05fb3905e6
commit dfa017adc3
2 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/modal.js
View File

@@ -60,7 +60,6 @@ const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}` const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_SCROLLABLE = 'modal-dialog-scrollable'
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure' const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure'
const CLASS_NAME_BACKDROP = 'modal-backdrop' const CLASS_NAME_BACKDROP = 'modal-backdrop'
const CLASS_NAME_OPEN = 'modal-open' const CLASS_NAME_OPEN = 'modal-open'
@@ -249,11 +248,10 @@ class Modal {
this._element.style.display = 'block' this._element.style.display = 'block'
this._element.removeAttribute('aria-hidden') this._element.removeAttribute('aria-hidden')
this._element.setAttribute('aria-modal', true) this._element.setAttribute('aria-modal', true)
this._element.scrollTop = 0
if (this._dialog.classList.contains(CLASS_NAME_SCROLLABLE) && modalBody) { if (modalBody) {
modalBody.scrollTop = 0 modalBody.scrollTop = 0
} else {
this._element.scrollTop = 0
} }
if (transition) { if (transition) {

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

@@ -382,10 +382,29 @@ describe('Modal', () => {
modal.show() modal.show()
}) })
it('should set modal body scroll top to 0 if .modal-dialog-scrollable', done => { it('should set .modal\'s scroll top to 0', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div class="modal fade">', '<div class="modal fade">',
' <div class="modal-dialog modal-dialog-scrollable">', ' <div class="modal-dialog">',
' </div>',
'</div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.scrollTop).toEqual(0)
done()
})
modal.show()
})
it('should set modal body scroll top to 0 if modal body do not exists', done => {
fixtureEl.innerHTML = [
'<div class="modal fade">',
' <div class="modal-dialog">',
' <div class="modal-body"></div>', ' <div class="modal-body"></div>',
' </div>', ' </div>',
'</div>' '</div>'
@@ -403,25 +422,6 @@ describe('Modal', () => {
modal.show() modal.show()
}) })
it('should set .modal\'s scroll top to 0 if .modal-dialog-scrollable and modal body do not exists', done => {
fixtureEl.innerHTML = [
'<div class="modal fade">',
' <div class="modal-dialog modal-dialog-scrollable">',
' </div>',
'</div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.scrollTop).toEqual(0)
done()
})
modal.show()
})
it('should not enforce focus if focus equal to false', done => { it('should not enforce focus if focus equal to false', done => {
fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>' fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>'