<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();};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.