Modal emergente simple con JavaScript vanilla

HTML<!-- body overlay --> <div class="body-blackout"></div> <!-- Modals Triggers --> <button type="button" class="popup-trigger" data-popup-trigger="one"> Popup Trigger One </button> <button type="button" class="popup-trigger" data-popup-trigger="two"> Popup Trigger Two </button> <!-- Modals --> <div class="popup-modal" data-popup-modal="one"> <i class="popup-modal__close">X</i> <h1 class="font-weight-bold"> Modal One Title </h1> </div> <div class="popup-modal" data-popup-modal="two"> <i class="popup-modal__close">X</i> <h1 class="font-weight-bold"> Modal Two Title </h1> </div>

CSS box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { font-family: "Open Sans", sans-serif; padding: 0; margin: 0; } body { background-color: #f6f6f6; min-height: 100vh; height: 100vh; padding: 35px; position: relative; } a { text-decoration: none; color: inherit; } .body-blackout { position: absolute; z-index: 1010; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); display: none; } .body-blackout.is-blacked-out { display: block; } .popup-trigger { display: inline-block; } .popup-modal { height: 365px; width: 650px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 45px; opacity: 0; pointer-events: none; transition: all 300ms ease-in-out; z-index: 1011; box-shadow: 0 0 20px 0 rgb(0 0 0 / 70%); box-sizing: border-box; } .popup-modal.is--visible { opacity: 1; pointer-events: auto; } .popup-modal__close { position: absolute; font-size: 1.2rem; right: 10px; top: 10px; cursor: pointer; }

JavaScriptconst modalTriggers = document.querySelectorAll('.popup-trigger') const modalCloseTrigger = document.querySelector('.popup-modal__close') const bodyBlackout = document.querySelector('.body-blackout') modalTriggers.forEach(trigger => { trigger.addEventListener('click', () => { const { popupTrigger } = trigger.dataset const popupModal = document.querySelector(`[data-popup-modal="${popupTrigger}"]`) popupModal.classList.add('is--visible') bodyBlackout.classList.add('is-blacked-out') popupModal.querySelector('.popup-modal__close').addEventListener('click', () => { popupModal.classList.remove('is--visible') bodyBlackout.classList.remove('is-blacked-out') }) bodyBlackout.addEventListener('click', () => { // TODO: Turn into a function to close modal popupModal.classList.remove('is--visible') bodyBlackout.classList.remove('is-blacked-out') }) }) })

Puede cambiar código para ver el resultado

Resultado ↓