3.0.0-alpha.7 Alpha
Default Default Classic Light Dark Light Dark System
Search /
Default Default Classic Light Dark Light Dark System
Native Styles

Dialog

<dialog>

Dialog styles apply your Web Awesome theme to the HTML <dialog> element. Dialogs, also called "modals", appear above the page and interrupt a user's focus.

Want to do more? Check out the <wa-dialog> component!

Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
<dialog id="dialog-overview">
	<header>
		<h2>Dialog</h2>
		<button data-dialog="close" class="wa-plain">✖️</button>
	</header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <footer>
	<button class="wa-brand" data-dialog="close">Close</button>
  </footer>
</dialog>

<button>Open Dialog</button>

<script>
  const dialog = document.querySelector('#dialog-overview');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => dialog.showModal());
  dialog.addEventListener('click', event => {
	if (event.target.closest('[data-dialog="close"]')) {
		dialog.close();
	}
  });
</script>
    No results