upd
parent
018d0ce555
commit
2d670f24b4
|
@ -1 +1,2 @@
|
|||
.hta_config/conf.php
|
||||
.hta_config/conf.php
|
||||
*.html
|
|
@ -1,46 +1 @@
|
|||
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>
|
||||
sample route home
|
Loading…
Reference in New Issue