Add note about cancelling modal events to modal.md

[crespire]

Adds a note about cancelling a modal event by return event.preventDefault();

Description

Adds additional code snippet demonstrating cancelling a modal event.

Motivation & Context

As someone new to Bootstrap, I didn't see this behaviour documented but it exists and was fixed with #34087 a few years ago.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

Documentation change only.

Related issues

[julien-deramond]

Thanks for the PR @crespire, there are some issues to fix with the content that are in my comments.

I'm wondering if it's not a duplicate of https://getbootstrap.com/docs/5.3/getting-started/javascript/#events. This concept is already explained generally in the JavaScript documentation.

[crespire]

Thanks for the PR @crespire, there are some issues to fix with the content that are in my comments.

I'm wondering if it's not a duplicate of https://getbootstrap.com/docs/5.3/getting-started/javascript/#events. This concept is already explained generally in the JavaScript documentation.

Thanks for the note. I'm happy to change this to a link reference instead if you feel that's more ideal. I think sometimes folks read sections of docs in isolation and details like this can get lost or can be a somewhat "unknown unknown" for more junior folks (like myself!).

Let me know what direction you want to take on this and I'm happy to make the changes, but I've accepted your other suggestions!

[julien-deramond]

What do you think if instead of the code example, we describe the event more precisely by referencing this use case like that:

diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 9f42f5aba..25b7f3a3a 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -856,7 +856,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
 {{< bs-table >}}
 | Event | Description |
 | --- | --- |
-| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
+| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. Can be prevented by calling `event.preventDefault()`. See [JavaScript events documentation]({{< docsref "/getting-started/javascript#events" >}}) for more details on event prevention. |
 | `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
 | `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
 | `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |

It would keep the documentation DRY by referencing the general events documentation and make the hide prevention capability more discoverable.

[crespire]

What do you think if instead of the code example, we describe the event more precisely by referencing this use case like that:

diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 9f42f5aba..25b7f3a3a 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -856,7 +856,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
 {{< bs-table >}}
 | Event | Description |
 | --- | --- |
-| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
+| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. Can be prevented by calling `event.preventDefault()`. See [JavaScript events documentation]({{< docsref "/getting-started/javascript#events" >}}) for more details on event prevention. |
 | `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
 | `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
 | `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |

It would keep the documentation DRY by referencing the general events documentation and make the hide prevention capability more discoverable.

I think that's a good idea! I'm not tied to my proposed changes.

[julien-deramond]

OK fine, thanks for your feedback. Let's try with this approach and refine later one if needed based on other users' feedback :)