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">打开模态框</button>

<div id="modals-here"></div>

这个按钮在被点击时会向/uikit-modal.html发送GET请求。 该文件的内容将被添加到DOM中#modals-here DIV的下方。

我们没有使用标准的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">模态对话框</h2>
		<p>这个模态对话框是由HTMX动态加载的。</p>

		<form _="on submit take .uk-open from #modal">
			<div class="uk-margin">
				<input class="uk-input" placeholder="你的名字是？">
			</div>
			<button type="button" class="uk-button uk-button-primary">保存更改</button>
			<button 
				id="cancelButton"
				type="button" 
				class="uk-button uk-button-default" 
				_="on click take .uk-open from #modal wait 200ms then remove #modal">关闭</button>
		</form>
	</div>
</div>

按钮和表单上的Hyperscript在对话框完成或取消时触发动画。 如果不使用这个Hyperscript，模态框仍然可以工作，但UIKit的淡入动画不会被触发。

当然，你也可以使用JavaScript而不是Hyperscript来完成这项工作，只是代码量会多很多：

// 当模态对话框加载并显示时触发淡入动画
window.document.getElementById("showButton").addEventListener("htmx:afterOnLoad", function() {
	setTimeout(function(){
		window.document.getElementById("modal").classList.add("uk-open")
	}, 10)
})


// 当模态框关闭时触发淡出动画
window.document.getElementById("cancelButton").addEventListener("click", function() {
	window.document.getElementById("modal").classList.remove("uk-open")
	setTimeout(function(){
		window.document.getElementById("modals-here").innerHTML = ""
		,200
	})
})

🔗演示