Documentation
Docs

Dialog

ska-theme includes a custom Alpine.js component for handling HTML dialog elements.

The module abstracts away calling the native .showModal(), .close() functions, adds x-transition to the dialog and enables closing of the modal by clicking away from the modal.

Creating a dialog

Adding x-data="skaDialog" do an element will locate a button and a dialog from its’ contents and automatically assign x-bind="trigger" and x-bind="dialog" attributes to them to handle opening and closing the dialog.

Basic dialogHTML
<div x-data="skaDialog">
	<button>Open dialog</button>
	<dialog>Dialog content</dialog>
</div>

In the block editor the <dialog> element is rendered as <div> so it can be visible and editable. Since this content is usually designed to be rendered in an overlay use the Advanced -> Hide in editor option to hide this block in the editor unless it is selected, so that the dialog content doesn’t consume space in the editor unless you’re editing it.

Dialog content

Styling a dialog

ska-theme comes with a Dialog preset that can be applied to the <dialog> element to give it consistent styles. The preset is designed to utilize elements with .header and .content classes to style it and styles the ::backdrop as well.

Dialog markup for Dialog presetHTML
<dialog class="ska-preset--ska-theme--dialog">
	<div class="header">Dialog title</div>
	<div class="content">Dialog content</div>
</dialog>

Basic styled dialog

Dialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus malesuada tristique. Sed elit sapien, imperdiet at orci in, consectetur aliquam ligula. In vulputate at lorem ac vehicula. Ut hendrerit nulla nisl, vel ornare nisl molestie in. Aliquam sit amet nibh libero. Suspendisse vitae massa ac ex tincidunt iaculis blandit sit amet sapien.

The dialog closes when clicking on outside area. For a custom close button add an element with x-on:click="close" attribute.

Dialog header with a close buttonHTML
<div class="header flex flex-row justify-between items-center">
	<p class="m-0">Dialog title</p>
	<button x-on:click="close" aria-label="Close dialog">
		<svg .../>
	</button>
</div>

Styled dialog with a close button

Dialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus malesuada tristique. Sed elit sapien, imperdiet at orci in, consectetur aliquam ligula. In vulputate at lorem ac vehicula. Ut hendrerit nulla nisl, vel ornare nisl molestie in. Aliquam sit amet nibh libero. Suspendisse vitae massa ac ex tincidunt iaculis blandit sit amet sapien.