---
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 `#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("modals-here").innerHTML = ""
,200
})
})
```
{% include demo_ui.html.liquid %}