HTML (I add space between < an name selector):
< button data-modal-target="#modal">Open Modal
< div class=“modal” id=“modal”>
< div class=“modal-header”>
< div class=“title”>Example Modal
< button data-close-button class=“close-button”>×
< /div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis quae quia soluta totam doloribus quos nesciunt necessitatibus, consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur sint officiis perferendis atque! Voluptatem maxime eius eum dolorem dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
< /div>
< /div>
< div id=“overlay”>
CSS:
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
JS:
const openModalButtons = document.querySelectorAll(’[data-modal-target]’)
const closeModalButtons = document.querySelectorAll(’[data-close-button]’)
const overlay = document.getElementById(‘overlay’)
openModalButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
overlay.addEventListener(‘click’, () => {
const modals = document.querySelectorAll(’.modal.active’)
modals.forEach(modal => {
closeModal(modal)
})
})
closeModalButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const modal = button.closest(’.modal’)
closeModal(modal)
})
})
function openModal(modal) {
if (modal == null) return
modal.classList.add(‘active’)
overlay.classList.add(‘active’)
}
function closeModal(modal) {
if (modal == null) return
modal.classList.remove(‘active’)
overlay.classList.remove(‘active’)
}