Modal Dialogs with 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>

์ด ๋ฒ„ํŠผ์€ ํด๋ฆญ ์‹œ /uikit-modal.html์— GET ์š”์ฒญ์„ ๋ณด๋ƒ…๋‹ˆ๋‹ค. ์ด ํŒŒ์ผ์˜ ๋‚ด์šฉ์€ #modals-here DIV ์•„๋ž˜์— DOM์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.

ํ‘œ์ค€ UIKit JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹ , ์šฐ๋ฆฌ๋Š” Hyperscript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UIKit์˜ ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํŠธ๋ฆฌ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‹คํ–‰๋  ์ˆ˜ ์žˆ๋„๋ก 10ms์˜ ์ง€์—ฐ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ, ์„œ๋ฒ„๋Š” 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๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์ฝ”๋“œ๊ฐ€ ํ›จ์”ฌ ๊ธธ์–ด์ง‘๋‹ˆ๋‹ค.


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

๐Ÿ”—Demo