46 lines
1.5 KiB
PHP
46 lines
1.5 KiB
PHP
sample route home
|
|
<button
|
|
id="showButton"
|
|
hx-get="/uikit-modal.html"
|
|
hx-target="#modals-here"
|
|
class="uk-button uk-button-primary"
|
|
_="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal">Open Modal</button>
|
|
|
|
<div id="modals-here"></div>
|
|
|
|
<div id="modal" class="uk-modal" style="display:block;">
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<h2 class="uk-modal-title">Modal Dialog</h2>
|
|
<p>This modal dialog was loaded dynamically by HTMX.</p>
|
|
|
|
<form _="on submit take .uk-open from #modal">
|
|
<div class="uk-margin">
|
|
<input class="uk-input" placeholder="What is Your Name?">
|
|
</div>
|
|
<button type="button" class="uk-button uk-button-primary">Save Changes</button>
|
|
<button
|
|
id="cancelButton"
|
|
type="button"
|
|
class="uk-button uk-button-default"
|
|
_="on click take .uk-open from #modal wait 200ms then remove #modal">Close</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// 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
|
|
})
|
|
})
|
|
</script> |