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 <[email protected]>

1 files changed, 28 insertions, 1 deletions

diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index e6ef555e7..86b366001 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -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">',