3.0.0-alpha.11 Alpha
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>

Opting In to Native Dialog Styles

If you want to use the Native Dialog styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/dialog.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/dialog.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results