<main>
  <h1>Dialog Demo</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto recusandae amet, rerum quasi quaerat ipsum nam earum vitae distinctio deleniti. Rerum earum excepturi ab, totam tenetur fuga praesentium illum repudiandae.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto recusandae amet, rerum quasi quaerat ipsum nam earum vitae distinctio deleniti. Rerum earum excepturi ab, totam tenetur fuga praesentium illum repudiandae.</p>
  
  
  <!-- Dialog Button -->
  <button onclick="window.dialog.showModal();">
    Open Dialog
  </button>
</main>

<!-- Dialog Popup -->
<dialog id="dialog" class="">
  <h2>Hello.</h2>
  <p>I'm a dialog element that is open.</p>
  <p>The rest of the page is inert while I'm open - try clicking anywhere else on the page to test.</p>
  <button onclick="window.dialog.close();" aria-label="close" class="x">❌</button>
</dialog>
* {
	margin: 0;
	padding: 0;
}

dialog {
  padding: 1rem 3rem;
  background: var(--coral);
  max-width: 64ch;
  margin: 2rem auto;
}

.x {
  filter: grayscale(1);
  border: none;
  background: none;
  position: absolute;
  top: 0;
  right: 0.4rem;
}

body {
  background-color: var(--blue);
  font-family: system-ui, serif;
  line-height: 1.5;
  padding-bottom: 2rem;
}

main {
  max-width: 500px;
  margin: 2rem auto;
  display: grid;
}

button {
  padding: 0.5rem;
  font-size: 1rem;
  background: var(--coral);
  border: 2px solid;
  border-radius: 0.5rem;
  justify-self: end;
}


External CSS

  1. https://codepen.io/web-dot-dev/pen/54c079f4ba2f7cf20163b8bd89280de2.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://code.jquery.com/jquery-1.10.2.js
  2. https://code.jquery.com/ui/1.10.4/jquery-ui.js