From db79cf6fb03aa307839b3a994df172c4accf5ffb Mon Sep 17 00:00:00 2001 From: Simmon Li Date: Wed, 5 Apr 2023 08:32:39 -0400 Subject: [PATCH 1/5] Update modal.md Adds a note about cancelling a modal event by `return event.preventDefault();` --- site/content/docs/5.3/components/modal.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index 55272b33f6c2..bd33cdf81fce 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -868,4 +868,11 @@ const myModalEl = document.getElementById('myModal') myModalEl.addEventListener('hidden.bs.modal', event => { // do something... }) + +myModalEl.addEventListner('hide.bs.modal', event => { + // you can also abort the event... + if (!valid) { + return event.preventDefault(); + } +} ``` From 19bdf8997a9e538d789059c957111df81dc247f1 Mon Sep 17 00:00:00 2001 From: Simmon Li Date: Tue, 27 Feb 2024 11:53:39 -0500 Subject: [PATCH 2/5] Update site/content/docs/5.3/components/modal.md --- site/content/docs/5.3/components/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index fda5638b5068..584073652c03 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -869,7 +869,7 @@ myModalEl.addEventListener('hidden.bs.modal', event => { // do something... }) -myModalEl.addEventListner('hide.bs.modal', event => { +myModalEl.addEventListener('hide.bs.modal', event => { // you can also abort the event... if (!valid) { return event.preventDefault(); From 3c532205109344ccdd4ce80114ea1748321ce388 Mon Sep 17 00:00:00 2001 From: Simmon Li Date: Tue, 27 Feb 2024 11:57:53 -0500 Subject: [PATCH 3/5] Update site/content/docs/5.3/components/modal.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- site/content/docs/5.3/components/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index 584073652c03..0036b446b651 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -874,5 +874,5 @@ myModalEl.addEventListener('hide.bs.modal', event => { if (!valid) { return event.preventDefault(); } -} +}) ``` From 8563f957f0dba17b5361639e6282df3497c753ff Mon Sep 17 00:00:00 2001 From: Simmon Li Date: Tue, 27 Feb 2024 11:58:05 -0500 Subject: [PATCH 4/5] Update site/content/docs/5.3/components/modal.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- site/content/docs/5.3/components/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index 0036b446b651..fe6dcd9d64cf 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -872,7 +872,7 @@ myModalEl.addEventListener('hidden.bs.modal', event => { myModalEl.addEventListener('hide.bs.modal', event => { // you can also abort the event... if (!valid) { - return event.preventDefault(); + return event.preventDefault() } }) ``` From 33c9dbf5b0ea209c7814683e2948db5c8f6677c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 12 Feb 2025 18:40:36 +0100 Subject: [PATCH 5/5] docs: move note about cancelling modal events to the events' table --- site/content/docs/5.3/components/modal.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index dffe4849d10c..25b7f3a3af3f 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. | @@ -868,11 +868,4 @@ const myModalEl = document.getElementById('myModal') myModalEl.addEventListener('hidden.bs.modal', event => { // do something... }) - -myModalEl.addEventListener('hide.bs.modal', event => { - // you can also abort the event... - if (!valid) { - return event.preventDefault() - } -}) ```