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>

1 files changed, 18 insertions, 0 deletions

diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index e6a838aac2..7ba55b3b50 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -831,11 +831,29 @@ The modal plugin toggles your hidden content on demand, via data attributes or J
 
 ### Via data attributes
 
+#### Toggle
+
 Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
 
 ```html
 <button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
 ```
+#### Dismiss
+
+Dismissal can be achieved with `data` attributes on a button **within the modal** as demonstrated below:
+
+```html
+<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+```
+
+or on a button **outside the modal** using the `data-bs-target` as demonstrated below:
+
+```html
+<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
+```
+{{< callout warning >}}
+While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
+{{< /callout >}}
 
 ### Via JavaScript