使用 UIKit 的模式对话框

许多 CSS 工具包（和 Javascript）都包含用于创建模式对话框的样式。此示例展示了如何使用 HTMX 通过 UIKit 显示动态对话框，以及如何使用少量或不使用 Javascript 来触发其动画样式。

我们从一个触发对话框的按钮开始，以及标记底部的 DIV，对话框将在其中加载：

这是使用 HTMX 通过 UIKit 远程加载模式对话框的示例。在此示例中，我们将使用 Hyperscript来演示该脚本语言如何让你将 htmx 和其他库清晰地结合在一起。

<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>

单击此按钮时使用 GET 请求来处理 /uikit-modal.html 的结果。此文件的内容将添加到 #modals-here DIV 下的 DOM 中。

我们不使用标准 UIKit Javascript 库，而是使用 Hyperscript，它可以触发 UIKit 的流畅动画。它延迟了 10ms，以便 UIKit 的动画能够正确运行。

最后，服务器以稍微修改过的 UIKit 标准模式版本进行响应

<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>

当此对话框完成或取消时，按钮和表单上的 Hyperscript 会触发动画。如果你未使用此 Hyperscript，模态框仍将起作用，但不会触发 UIKit 的淡入动画。

当然，你可以使用 JavaScript 而不是 Hyperscript 来完成这项工作，只不过代码更多一些：

// 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
    })
})
Server Requests ↑ Show

演示