带有 UIKit 的模态对话框

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

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

我们从一个触发对话框的按钮开始，并在标记底部使用一个 DIV 来加载对话框：

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

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

¥This is an example of using HTMX to remotely load modal dialogs using UIKit. In this example we will use Hyperscript to demonstrate how cleanly that scripting language allows you to glue htmx and other libraries together.

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

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

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

¥Rather than using the standard UIKit Javascript library we are using a bit of Hyperscript, which triggers UIKit’s smooth animations. It is delayed by 10ms so that UIKit’s animations will run correctly.

最后，服务器使用略微修改的 UIKit 标准模式版本进行响应

¥Finally, the server responds with a slightly modified version of UIKit’s standard modal

<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 的淡入动画。

¥Hyperscript on the button and the form trigger animations when this dialog is completed or canceled. If you didn’t use this Hyperscript, the modals will still work but UIKit’s fade in animations will not be triggered.

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

¥You can, of course, use JavaScript rather than Hyperscript for this work, it’s just a lot more code:

// 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
	})
})

🔗Demo