Components

The dialog should be a direct child of body to ensure good positioning.

To display the closing cross, a button with an aria-label needs to be added into the header, as shown below. The aria-label provides a translated description of the close action. It can be more descriptive, like Close login, etc., depending on the modal window usage.

Modal

The dialog is a version of a popup window that does disable interaction with the rest of the page.

To open the modal, do not use the open attribute. Instead, open it using JavaScript via dialogElement.showModal() function. This way, the esc functionality is enabled by default (no JS needed).

In the example below, you can see a form as the wrapper of the article. This way, the modal will be auto-closed by a submit button. If you want to close a modal without submitting the form, you need to add formmethod="dialog" to the submit button as shown below.

<dialog>
	<form>
		<article role="presentation">
			<header>
				<h3>Modal title</h3>
				<button 
					type="submit" 
					formmethod="dialog" 
					aria-label="Close" >
				</button>
			</header>
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
			Asperiores vitae officia, voluptatem modi quos quisquam 
			similique tenetur voluptatum, ratione suscipit numquam dolore 
			aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.
			<footer>
				<div class="s-grid" style="--span:3;">
					<div>
						<div>
							<button 
								formmethod="dialog" 
								class="s-secondary" 
								type="submit">
								Cancel
							</button>
						</div>
						<div><button type="submit">Submit</button></div>
					</div>
				</div>
			</footer>
		</article>
	</form>
</dialog>

Dialog

A dialog is a version of a popup window that does not disable interaction with the rest of the page.

To open a dialog, either use dialogElement.show() or add the open attribute to it. Opening and esc event need to be implemented by JavaScript. Closing can be handled by a submit button, as shown in the example above.

<dialog open>
	<article role="presentation">
		<header>
			<h3>Dialog title</h3>
			<button type="button" aria-label="Close"></button>
		</header>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</article>
</dialog>

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.