<!Doctype html>
<html>
  <body>
<button id="opendial" style="color: red; background: turquoise; padding: 10px;
 font-size: 16px; font-weight:500;)">Caution!</button>

<dialog id="mydial" style="text-align: center; width: 150px;">

<p>Be sure to provide all requirements before you continue!</p>

<button id="closedial">Cancel</button>

</dialog>
  </body>
</html>
var myDialog=document.getElementById('mydial');
                        document.getElementById('opendial').onclick=function(){

                              myDialog.show();};
                             document.getElementById('closedial').onclick=function(){
                           myDialog.close();};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.