diff --git a/www/examples.md b/www/examples.md
index 640993d4..b417c30f 100644
--- a/www/examples.md
+++ b/www/examples.md
@@ -21,5 +21,8 @@ You can copy and paste them and then adjust them for your needs.
| [Active Search](/examples/active-search) | Demonstrates the active search box pattern
| [Progress Bar](/examples/progress-bar) | Demonstrates a job-runner like progress bar
| [Value Select](/examples/value-select) | Demonstrates making the values of a select dependent on another select
-| [Dialogs](/examples/dialogs) | Demonstrates the prompt and confirm dialogs
| [Animations](/examples/animations) | Demonstrates various animation techniques
+| [Dialogs - Browser](/examples/dialogs) | Demonstrates the prompt and confirm dialogs
+| [Dialogs - UIKIt](/examples/modal-uikit) | Demonstrates modal dialogs using UIKit
+| [Dialogs - Bootstrap](/examples/modal-bootstrap) | Demonstrates modal dialogs using Bootstrap
+
diff --git a/www/examples/modal-bootstrap.md b/www/examples/modal-bootstrap.md
new file mode 100644
index 00000000..fd218e2f
--- /dev/null
+++ b/www/examples/modal-bootstrap.md
@@ -0,0 +1,125 @@
+---
+layout: demo_layout.njk
+---
+
+## Modal Dialogs in Bootstrap
+
+Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes.
+This example shows how to use HTMX to display dynamic dialog using Bootstrap, and how to
+trigger its animation styles in Javascript.
+
+We start with a button that triggers the dialog, along with a DIV at the bottom of your
+markup where the dialog will be loaded:
+
+```html
+
+
+
+```
+
+This button uses a `GET` request to `/modal` when this button is clicked. The
+contents of this file will be added to the DOM underneath the `#show-modals-here` DIV.
+
+We're replacing Bootstrap's javascript widgets with a small bit of Hyperscript to provide
+smooth animations when the dialog opens and closes.
+
+Finally, the server responds with a slightly modified version of Bootstrap's standard modal
+
+```html
+
+
+
+
+
+
Modal title
+
+
+
Modal body text goes here.
+
+
+
+
+
+```
+
+We're replacing the standard Bootstrap Javascript library with a little bit of Javascript,
+which triggers Bootstrap's smooth animations.
+
+```javascript
+function closeModal() {
+ var container = document.getElementById("modals-here")
+ var backdrop = document.getElementById("modal-backdrop")
+ var modal = document.getElementById("modal")
+
+ modal.classList.remove("show")
+ backdrop.classList.remove("show")
+
+ setTimeout(function() {
+ container.removeChild(backdrop)
+ container.removeChild(modal)
+ }, 200)
+}
+```
+
+
+
+
+{% include demo_ui.html.liquid %}
+
+
+
+
+
+
diff --git a/www/examples/modal-uikit.md b/www/examples/modal-uikit.md
new file mode 100644
index 00000000..33a83be7
--- /dev/null
+++ b/www/examples/modal-uikit.md
@@ -0,0 +1,135 @@
+---
+layout: demo_layout.njk
+---
+
+## Modal Dialogs
+
+Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes.
+This example shows how to use HTMX to display dynamic dialog using UIKit, and how to
+trigger its animation styles with little or no Javascript.
+
+We start with a button that triggers the dialog, along with a DIV at the bottom of your
+markup where the dialog will be loaded:
+
+This is an example of using HTMX to remotely load modal dialogs using UIKit.
+
+```html
+
+
+
+```
+
+This button uses a `GET` request to `/uikit-modal.html` when this button is clicked. The
+contents of this file will be added to the DOM underneath the `#show-modals-here` DIV.
+
+We're replacing the standard UIKit Javascript library with a little bit of Hyperscript,
+which triggers UIKit's smooth animations. It is delayed by 10ms so that UIKit's animations
+will run correctly.
+
+Finally, the server responds with a slightly modified version of UIKit's standard modal
+
+```html
+
+
+
Modal Dialog
+
This modal dialog was loaded dynamically by HTMX.
+
+
+
+
+```
+
+Hyperscript on the button and the form trigger animations when this dialog is completed
+or canceled. If you don't want to use Hyperscript, the modals will still work but UIKit's
+fade in animations will not be triggered.
+
+Alternatively, you can add and remove these CSS classes without Hyperscript, by using in straight Javascript.
+It's just a lot more code:
+
+```javascript
+
+// This triggers the fade-in animation when a modal dialog is loaded and displayed
+window.document.getElementById("showButton").addEventListener("htmx:afterOnLoad", function() {
+ setTimeout(function(){
+ window.document.getElementById("modal").classList.add("uk-open")
+ }, 10)
+})
+
+
+// This triggers the fade-out animation when the modal is closed.
+window.document.getElementById("cancelButton").addEventListener("click", function() {
+ window.document.getElementById("modal").classList.remove("uk-open")
+ setTimeout(function(){
+ window.document.getElementById("show-modals-here").innerHTML = ""
+ ,200
+ })
+})
+```
+
+
+
+{% include demo_ui.html.liquid %}
+
+
+
+
+