Tengo un fragmento de código que permite abrir un modal haciendo clic en un botón y cerrarlo nuevamente haciendo clic en el mismo botón. Me gustaría que fuera posible cerrar el modal haciendo clic en cualquier parte de la pantalla, no solo en este botón.
Encontré muchos fragmentos de código en línea sobre cómo hacer esto, pero como soy un principiante con JavaScript, es muy difícil para mí incorporar nuevos fragmentos de código dentro del mío y hacer que funcione. ¿Puede alguien ayudarme a resolver esto y explicarme cómo y dónde necesito agregar/cambiar líneas en mi código existente?
Aquí está el enlace para ver cómo funciona el modal en este momento (botón arriba a la derecha de la pantalla): https://carbonrollercoaster.bsqd.me/
JavaScript
const bf = document.querySelector('#botsquad-frame'); let el = document.createElement('div'); el.setAttribute('id', 'mijnKnopje'); const inhoud = ` <div class="info-content"> <p1>INFORMATIE: <br> By participating within this chat, you accept that some of the answers you give will be displayed on one of the screens within the installation. <br><br> HOW TO:<br> Go in conversation with Nostos and Algia, ask them questions and discuss multiple topics. </p1> </div> <div class="info-section"> <a role="button" class="knopje info-button" style="background-color:mediumpurple"> <div class="info-label">!</div> </a> </div> `; el.innerHTML = inhoud; bf.appendChild( el ); const mijnKnopje = document.querySelector('.knopje'); const mijnInfo = document.querySelector('.info-content'); mijnKnopje.addEventListener('click', () => { //mijnInfo.style.display = 'block'; //mijnKnopje.style.backgroundColor = 'fuchsia'; mijnKnopje.classList.toggle( 'active' ); mijnInfo.classList.toggle( 'active' ); let inputField = document.querySelector('.chat-input'); if ( mijnInfo.classList.contains( 'active' ) ) { inputField.style.display = 'none'; } else { inputField.style.display = 'revert'; } } );Intente usar la delegación de eventos .
Aquí hay un ejemplo reproducible mínimo para trabajar.
document.addEventListener(`click`, handle); function createOrDestroyPopupDummy(create) { const inhoud = ` <div id="popup"> <h3>INFORMATIE</h3> <div> Als je in deze chat meedoet, kunnen antwoorden die je geeft door anderen worden gezien </div> <h3>HOW TO</h3> <div> Vraag Nostos and Algia van alles of discussieer met ze over wat dan ook. </div> <div> <button id="closeInfo">Gezien!</div> </div> </div>`; const popupOpen = document.querySelector(`#popup`); const createBox = () => document.body.insertAdjacentHTML(`beforeend`, inhoud); const destroyBox = () => popupOpen && popupOpen.remove(); return create ? createBox() : destroyBox(); } function handle(evt) { // show 'popup' if (evt.target.id === "info") { return createOrDestroyPopupDummy(true); } // do nothing if within the box and not clicked button#closeInfo if (evt.target.id !== `closeInfo` && evt.target.closest(`#popup`)) { return; } // otherwise destroy the 'popup' return createOrDestroyPopupDummy(); } #closeInfo {margin-top: 0.5rem;} #popup { border: 2px solid green; box-shadow: 2px 2px 8px #999; width: 75vw; padding: 0.4rem; position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); } #popup h3 { margin-top: 0.2rem; margin-bottom: 0.1rem; } <button id="info">Info</button>Puede agregar otro detector de eventos para todo el div-info-content también conocido como const mijnInfo y eliminar la clase active cuando se hace clic:
const mijnInfo = document.querySelector('.info-content'); mijnInfo.addEventListener('click', () => { mijnKnopje.classList.remove( 'active' ); mijnInfo.classList.remove( 'active' ); document.querySelector('.chat-input').style.display = 'revert'; });