<main>
  <button type="button" command="show-modal" commandfor="modalDialog" aria-label="abrir modal" aria-controls="modalDialog" aria-haspopup="dialog">
    Abrir modal
  </button>
</main>
<dialog id="modalDialog" aria-labelledby="modalTitle">
  <button commandfor="modalDialog" command="close" aria-label="Fechar modal">&#10006;</button>
  <h1 id="modalTitle">Modal</h1>
  <section aria-labelledby="contentTitle">
    <h2 id="contentTitle">Seção do modal</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
</dialog>

:root {
  background: #3A637B;
}
button {
  cursor: pointer;
  color: #3A637B;
  background-color: #ffefa5;
}
main > button {
  font-weight: 700;
  padding: 10px;
  border-radius: 5px;
  border: 0;
}
dialog {
  border: 1px solid #333;
}
dialog > button {
  position: absolute;
  top: 0;
  right: 0;
}