Skip to content

Instantly share code, notes, and snippets.

@i12n
Last active December 22, 2015 12:16
Show Gist options
  • Save i12n/0636695460a3a739acc0 to your computer and use it in GitHub Desktop.
Save i12n/0636695460a3a739acc0 to your computer and use it in GitHub Desktop.
HTML5 dialog
<!DOCTYPE>
<html>
<head>
<style>
dialog::backdrop {
background:rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<button id="open-btn">open dialog</button>
<dialog id="show-dialog">
<p>Hi, this is a dialog!</p>
<form method="dialog">
<input type="submit" value="close dialog" />
</form>
</dialog>
<script type="text/javascript">
var showDialog = document.getElementById('show-dialog');
var openBtn = document.getElementById('open-btn');
openBtn.addEventListener('click', function() {
showDialog.showModal();
});
showDialog.addEventListener('close', function() {
showDialog.addEventListener('close', function() {
console.log(showDialog.returnValue); // "close dialog"
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment