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, 8 insertions, 2 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index 8dac75265..0e8346d6f 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -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