{"id":17,"date":"2025-09-26T08:50:45","date_gmt":"2025-09-26T08:50:45","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/dialog\/"},"modified":"2025-09-27T08:44:07","modified_gmt":"2025-09-27T08:44:07","slug":"dialog","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/dialog\/","title":{"rendered":"Dialog"},"content":{"rendered":"\n

ska-theme includes a custom Alpine.js component for handling HTML dialog elements.<\/p>\n\n\n\n

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

Creating a dialog<\/h2>\n\n\n\n

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

Basic dialog<\/span>HTML<\/span><\/header>
<div x-data=\"skaDialog\">\n\t<button>Open dialog<\/button>\n\t<dialog>Dialog content<\/dialog>\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\n
In the block editor the <dialog><\/code> element is rendered as <div><\/code> 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<\/strong> 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.<\/p>\n\n\n\n
\n