mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-08 14:46:34 +02:00
modal: change data-dismiss
so that it can be outside of a modal using bs-target
(#33403)
* change data-dismiss, so can be outside modal, using a bs-target * Update site/content/docs/5.0/components/modal.md Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
This commit is contained in:
@@ -249,7 +249,7 @@ describe('Modal', () => {
|
||||
modal.show()
|
||||
})
|
||||
|
||||
it('should close modal when a click occurred on data-bs-dismiss="modal"', done => {
|
||||
it('should close modal when a click occurred on data-bs-dismiss="modal" inside modal', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="modal fade">',
|
||||
' <div class="modal-dialog">',
|
||||
@@ -278,6 +278,33 @@ describe('Modal', () => {
|
||||
modal.show()
|
||||
})
|
||||
|
||||
it('should close modal when a click occurred on a data-bs-dismiss="modal" with "bs-target" outside of modal element', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<button type="button" data-bs-dismiss="modal" data-bs-target="#modal1"></button>',
|
||||
'<div id="modal1" class="modal fade">',
|
||||
' <div class="modal-dialog">',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const modalEl = fixtureEl.querySelector('.modal')
|
||||
const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]')
|
||||
const modal = new Modal(modalEl)
|
||||
|
||||
spyOn(modal, 'hide').and.callThrough()
|
||||
|
||||
modalEl.addEventListener('shown.bs.modal', () => {
|
||||
btnClose.click()
|
||||
})
|
||||
|
||||
modalEl.addEventListener('hidden.bs.modal', () => {
|
||||
expect(modal.hide).toHaveBeenCalled()
|
||||
done()
|
||||
})
|
||||
|
||||
modal.show()
|
||||
})
|
||||
|
||||
it('should set .modal\'s scroll top to 0', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="modal fade">',
|
||||
|
Reference in New Issue
Block a user