Modal dialog by Mistral UI - Alpine/Tailwind components

Modal dialog

Modal dialog with slick animation, key navigation, no background scrolling and no layout shifting.

PREVIEW

HTML


<div x-data="{ dialog: null }">
	<button class="text-white bg-blue-600 hover:brightness-110 focus:ring-4 focus:outline-none focus:ring-blue-600/30 rounded-lg w-full sm:w-auto px-4 py-2 text-center cursor-pointer text-sm inline-block  font-semibold" @click="dialog = 'myDialogId'">Show modal dialog</button>
	<template x-teleport="body">
		<div data-dialog-name="myDialogId" x-show="dialog === $el.dataset.dialogName" x-trap.inert.noscroll="dialog === $el.dataset.dialogName" @keydown.escape.window="dialog = null" x-transition:enter="transition duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-1" x-transition:leave="transition duration-300" x-transition:leave-start="opacity-1" x-transition:leave-end="opacity-0" class="grid place-content-center  bg-neutral-500/50 w-screen h-screen  fixed top-0 left-0 z-50 overflow-y-scroll">
			<div class="max-w-lg w-screen rounded-xl bg-white max-h-[calc(100vh-4rem)] flex flex-col " @mousedown.outside="dialog = null" x-show="dialog === $el.parentNode.dataset.dialogName" x-transition:enter="transition ease-[cubic-bezier(.46,1.56,.8,1)] duration-300" x-transition:enter-start="-translate-y-12" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-12">
				<h3 class="text-lg font-bold p-4 border-b flex items-center justify-between">
					Modal dialog title
					<button @click="dialog = null">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="humbleicons w-5 h-5 text-neutral-500 hover:text-neutral-800"><g xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M6 18L18 6M18 18L6 6"></path></g></svg>
					</button>
				</h3>
				<div class="overflow-y-auto flex-auto p-4">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In rutrum. Integer in sapien. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Phasellus rhoncus.
				</div>
			</div>
		</div>
	</template>
</div>

How to use it

Copy the code above into your project and link the trigger button to the associated dialog using your own myDialogId. In the spirit of working with Tailwind CSS, it's recommended to extract the dialog into a separate component with changable ID and content.

You can change the window with by changing the max-w-lg class on the dialog container. Try max-w-md or max-w-xl for example.

Multiple dialogs

Mistral UI Modal dialog is designed to be used with multiple dialogs on the same page. It can be helpful, when you need to trigger different dialogs from different places, e.g. from a table or a list.

Features

Closed by clicking outside or hitting ESC
Background scrolling is disabled
No layout shifting
Focus is trapped inside the dialog
When dialog is longer then viewport, it scrolls