Modal displays content in a layered overlay, temporarily blocking interaction with the main page..
<div class="c-modal">
<button class="c-modal__trigger">Open Modal</button>
<div class="c-modal__overlay">
<div class="c-modal__panel">
<h3>Modal Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, quasi ad suscipit culpa animi nostrum dolores minus autem est reprehenderit ratione, dicta quisquam at, maiores exercitationem fugiat minima tempore! Esse!</p>
<button class="c-modal__exit">Close Modal</button>
</div>
</div>
</div>
.c-modal__overlay {
display: grid;
align-content: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
z-index: 100;
}
.c-modal__overlay.is-active {
opacity: 1;
visibility: visible;
}
.c-modal__overlay.is-active .c-modal__panel {
transform: scale(1);
opacity: 1;
}
.c-modal__panel {
width: 400px;
height: 300px;
padding: 20px;
background-color: #ffffff;
color: #1A202C;
border-radius: 5px;
transform: scale(0.8);
opacity: 0;
transition: all 0.3s ease;
}
.c-modal__panel p {
margin: 5px 0;
}
.c-modal__trigger,
.c-modal__exit {
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.c-modal__trigger {
background-color: #33aef7;
}
.c-modal__trigger:hover {
background-color: #0889d5;
}
.c-modal__exit {
background-color: #ff3c26;
}
.c-modal__exit:hover {
background-color: #ff3c26;
}
.c-modal {
&__overlay {
display: grid;
align-content: center;
justify-content: center;
background-color: rgba(0,0,0, 0.5);
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
z-index: 100;
&.is-active {
opacity: 1;
visibility: visible;
.c-modal__panel {
transform: scale(1);
opacity: 1;
}
}
}
&__panel {
width: 400px;
height: 300px;
padding: 20px;
background-color: #ffffff;
color: #1A202C;
border-radius: 5px;
transform: scale(0.8);
opacity: 0;
transition: all 0.3s ease;
p {
margin: 5px 0;
}
}
&__trigger,
&__exit {
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
&__trigger {
background-color: #33aef7;
&:hover {
background-color: darken(#33aef7, 15%);
}
}
&__exit {
background-color: #ff3c26;
&:hover {
background-color: darken(#ff3c26, 5%);
}
}
}
const modalOverlay = document.querySelector('.c-modal__overlay');
const modalTrigger = document.querySelector('.c-modal__trigger');
const modalExit = document.querySelector('.c-modal__exit');
modalTrigger.addEventListener('click', () => {
modalOverlay.classList.add('is-active');
});
modalExit.addEventListener('click', () => {
modalOverlay.classList.remove('is-active');
});