<div class="h-center">
<button class="modal__open">
Open modal
</button>
</div>
<div class="both-center">
<div class="modal">
<div class="modal__text">
<h2 class="modal__title">Modal</h2>
<p class="modal__paragraph">
This is a modal
</p>
</div>
<button class="modal__close">
x
</button>
</div>
</div>
*,*::before,*::after{
margin:0;
padding:0;
}
.h-center{
display:flex;
justify-content:center;
}
.both-center{
display:none;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color:rgb(0,0,0,0.4);
height:100vh;
justify-content:center;
align-items:center;
}
.modal {
background-color:white;
width:12rem;
padding:1rem 1.5rem;
border:1px solid gray;
border-radius:6px;
display:flex;
align-items:start;
justify-content:space-between
}
.modal__open{
border:none;
border-radius:4px;
padding:0.5rem 1rem;
background-color:rgb(0,0,0,0.2)
}
.modal__close{
padding:0.1rem 0.5rem;
font-size:1rem;
}
.d-flex{
display:flex;
}
View Compiled
document.querySelector("body").addEventListener("click",(e) => {
e.stopPropagation()
const target = e.target
const modalContainer = target.closest("body").querySelector(".both-center")
if(target.classList.contains("modal__open")){
modalContainer.classList.add("d-flex")
}
if(target.classList.contains("modal__close")){
modalContainer.classList.remove("d-flex")
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.