Create a modal with just HTML using a dialog tag. Here is the complete code:
<html>
<head>
<style>
#dialog {
width: 400px;
padding: 20px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 4px;
}
#dialog h2 {
color: #333;
font-size: 18px;
margin-bottom: 10px;
}
#dialog p {
color: #555;
font-size: 16px;
margin-bottom: 20px;
}
#close {
background-color: #ddd;
border: none;
padding: 10px 20px;
color: #333;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
#close:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<button onclick="openDialog()">Open Dialog</button>
<dialog id="dialog">
<h2>Dialog Title</h2>
<p>This is the content of the dialog box.</p>
<button onclick="closeDialog()">Close Dialog</button>
</dialog>
<script>
function openDialog() {
document.getElementById("dialog").showModal();
}
function closeDialog() {
document.getElementById("dialog").close();
}
</script>
</body>
</html>
Top comments (0)