I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code:
<!DOCTYPE HTML>
<html>
<head>
<script>
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
</script>
<style>
dialog {
width: 500px;
background:black;
border: 1px solid #dadada;
font-family:sans-serif;
padding: 5px 10px 20px 20px;
}
</style>
</head>
<body>
<dialog id="window">
<h3>Sample Dialog!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
<button id="exit">Close Dialog</button>
</dialog>
<button id="show">Show Dialog</button>
</body>
</html>
Unfortunately, upon clicking the "Show Dialog" button, no action occurs.