<dialog id="my-modal">
  <p>
    It seems that we won't see native dialogs after all.
  </p>
  
  <button id="ok-btn">OK :(</button>
</dialog>
body {
  font-family: 'Roboto';
  color: #333;
}

dialog {
  text-align: center;
}

button {
  text-align: center;
  font-size: 1.1em;
}
var myModal = document.getElementById('my-modal')
myModal.showModal();

document.getElementById('ok-btn').addEventListener('click', function() {
  myModal.close();
});
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

This Pen doesn't use any external JavaScript resources.