mirror of https://github.com/twbs/bootstrap.git
allow dynamic modal body for scrollable modals
This commit is contained in:
parent
f4e297c878
commit
2ea71a9e78
|
@ -243,6 +243,7 @@ class Modal {
|
||||||
|
|
||||||
_showElement(relatedTarget) {
|
_showElement(relatedTarget) {
|
||||||
const transition = this._element.classList.contains(ClassName.FADE)
|
const transition = this._element.classList.contains(ClassName.FADE)
|
||||||
|
const modalBody = SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog)
|
||||||
|
|
||||||
if (!this._element.parentNode ||
|
if (!this._element.parentNode ||
|
||||||
this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
||||||
|
@ -254,8 +255,8 @@ class Modal {
|
||||||
this._element.removeAttribute('aria-hidden')
|
this._element.removeAttribute('aria-hidden')
|
||||||
this._element.setAttribute('aria-modal', true)
|
this._element.setAttribute('aria-modal', true)
|
||||||
|
|
||||||
if (this._dialog.classList.contains(ClassName.SCROLLABLE)) {
|
if (this._dialog.classList.contains(ClassName.SCROLLABLE) && modalBody) {
|
||||||
SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog).scrollTop = 0
|
modalBody.scrollTop = 0
|
||||||
} else {
|
} else {
|
||||||
this._element.scrollTop = 0
|
this._element.scrollTop = 0
|
||||||
}
|
}
|
||||||
|
|
|
@ -396,8 +396,6 @@ describe('Modal', () => {
|
||||||
const modalBody = modalEl.querySelector('.modal-body')
|
const modalBody = modalEl.querySelector('.modal-body')
|
||||||
const modal = new Modal(modalEl)
|
const modal = new Modal(modalEl)
|
||||||
|
|
||||||
spyOn(modal, 'hide').and.callThrough()
|
|
||||||
|
|
||||||
modalEl.addEventListener('shown.bs.modal', () => {
|
modalEl.addEventListener('shown.bs.modal', () => {
|
||||||
expect(modalBody.scrollTop).toEqual(0)
|
expect(modalBody.scrollTop).toEqual(0)
|
||||||
done()
|
done()
|
||||||
|
@ -406,6 +404,25 @@ 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>'
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue