<!DOCTYPE html>
<html>
<head>
<title>Dialog Tag</title>
</head>
<body>
<div>
<dialog id="Dialogbox" style="width:50%;background-color:#CCC; border:1px solid black;">
<p>This is Sample dialog box !</p>
<button id="hide">Close</button>
</dialog>
<button id="show">Click Here !</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('Dialogbox');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
</body>
</html>