<header>Site Header</header>
<main id="main-content">
<button id="open-dialog">Open modal</button>
<p>This is the main content of the page.</p>
<!-- More content here -->
</main>
<!-- Move the dialog outside the main element -->
<dialog id="dialog">
<h2>Modal Title</h2>
<div>
All the modal content goes in here...
<button id="close-dialog" autofocus>Close</button>
</div>
</dialog>
html,
body {
height: 100%;
overflow: visible;
font-family: sans-serif;
}
body {
background-color: black;
color: white;
}
main {
display: flex;
height: 80%;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
button#open-dialog {
background-color: #ff5f6d;
color: inherit;
border-radius: 5px;
padding: 1rem 1.4rem;
font-size: 1.4rem;
}
dialog {
width: 60%;
border: none;
border-radius: 8px;
animation: zoom-out 0.5s ease-out;
}
dialog[open] {
animation: zoom-in 0.5s ease-out;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
@keyframes zoom-in {
0% {
opacity: 0;
transform: scale(0.1);
display: none;
}
100% {
opacity: 1;
transform: scale(1);
display: block;
}
}
@keyframes zoom-out {
0% {
opacity: 1;
transform: scale(1);
display: block;
}
100% {
opacity: 0;
transform: scale(0);
display: none;
}
}
const dialog = document.getElementById("dialog");
const mainContent = document.getElementById("main-content");
const openButton = document.getElementById("open-dialog");
const closeButton = document.getElementById("close-dialog");
openButton.addEventListener("click", () => {
mainContent.setAttribute("inert", "");
dialog.showModal();
});
closeButton.addEventListener("click", () => {
dialog.close();
});
dialog.addEventListener("close", () => {
mainContent.removeAttribute("inert");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.