<body>
<dialog id = "modal">
<div>
<h1>Title</h1>
<p>Sample Text</p>
<button onclick="modal.close()">Close</button>
</div>
</dialog>
<button onclick=modal.showModal()>Click</button>
</body>
#modal {
width: 50vw;
max-width: 50%;
padding: 1rem;
border: none;
border-radius: 8px;
background-color: #eaeaea;
color: #333;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
#modal::backdrop {
background: rgba(0, 0, 0, 0.2);
}
