mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-06 13:46:42 +02:00
Code Issues Releases Wiki Activity

modal: change data-dismiss so that it can be outside of a modal using bs-target (#33403)

Browse Source 
* 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:
GeoSot
2021-07-19 16:56:05 +03:00
committed by GitHub
parent 06a1ca5623
commit dfafb9a60c
3 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/src/modal.js
View File

@@ -62,6 +62,7 @@ const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_STATIC = 'modal-static'
const SELECTOR = '.modal'
const SELECTOR_DIALOG = '.modal-dialog'
const SELECTOR_MODAL_BODY = '.modal-body'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
@@ -130,8 +131,6 @@ class Modal extends BaseComponent {
this._setEscapeEvent()
this._setResizeEvent()
EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event))
EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => {
if (event.target === this._element) {
@@ -436,6 +435,13 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
data.toggle(this)
})
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_DISMISS, function (event) {
const target = getElementFromSelector(this) || this.closest(SELECTOR)
const modal = Modal.getOrCreateInstance(target)
modal.hide(event)
})
/**
* ------------------------------------------------------------------------
* jQuery

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

@@ -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">',