Skip to content

Instantly share code, notes, and snippets.

@SpiffGreen

SpiffGreen/dialog.html

Created October 4, 2022 17:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SpiffGreen/8fcb08944a16c49e5a71f8fae3f82b57 to your computer and use it in GitHub Desktop.
Save SpiffGreen/8fcb08944a16c49e5a71f8fae3f82b57 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dialog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
dialog {
border: none;
outline: none;
border-radius: 5px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 50%;
}
</style>
</head>
<body>
<dialog>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
<button onclick="openModal()">Open Modal</button>
<script>
function openModal(e) {
const dialog = document.querySelector("dialog");
dialog.showModal();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment