Modal: evento click con JavaScript

Para el ejemplo no necesariamente tienen que utilizar el !important , solo pongan que el display sea manejado únicamente por las clases .hidden y .visible

   .hidden {
        display: none;
      }

      .visible {
        display: grid;
      }

      .modal {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 4;
        
        place-items: center;
      }

Para no crear un evento para cada super heroe en lugar de id podriamos usar una misma clase para los 3 superheroes, y usar querySelectorAll

Icono de cerrar: https://img.icons8.com/windows/32/000000/macos-close.png

considero que sería más sencillo solo agregar y quitar la clase hidden y así solo en JS agregas y quitas esa clase para no tener que utilizar Important o remove y add en una misma función. 💚

Modal: evento click con JavaScript

Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/10-evento-click-con-javascript
Según entendí por @erickgomez (gracias 😄).
1.- NO hace falta poner !important, porque recordemos que es una mala práctica.
2.- Estaba bien como la profesora lo estaba haciendo, el único “error” fue de que inicializamos nuestra clase modal diferente de none osea le decíamos que aparezca en el DOM.
3.- Para arreglar esto debíamos quitar el display:grid o cambiarlo por display:none de nuestra clase .modal , quedando:
Antes:

.modal {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
}

Después:

.modal {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 4;
    /* display: none; */
    place-items: center;
}

Creo que no es necesario el uso del !important en la clase modal, solo es no agregar el parámetro grid y dejarle esa tarea a la clase visible, solo en modal usar el place-items.

No es necesario el !important adema’s he agregado a que cuando le demos click en el back del modal se cierre también:

HTML

<!-- modal -->
            <section class="modal modal--hidden">
                <div class="modal__content">
                    <img class="modal__content--close" src="https://img.icons8.com/windows/50/000000/macos-close.png" alt="Cerrar Modal">
                </div>
                <div class="back-modal" id="back-modal"></div>
            </section>

CSS

.modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
}

.modal--hidden {
    display: none;
}

.modal--visible {
    display: grid;
}

.modal__content {
    background-color: white;
    width: 50%;
    height: 50%;
    z-index: 7;
    position: relative;
}

.modal .back-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 6;
}
.modal .modal__content--close {
    cursor: pointer;
    position: absolute;
    right: 0;
}

JS

const modal = document.querySelector('.modal');
const button1 = document.querySelector('#button1');
const backModal = document.querySelector('#back-modal');
const closeModal = document.querySelector('.modal__content--close');

button1.addEventListener('click', () => {
    modal.classList.remove('modal--hidden');
    modal.classList.add('modal--visible');
});

closeModal.addEventListener('click', () => {
    modal.classList.add('modal--hidden');
    modal.classList.remove('modal--visible');
});

backModal.addEventListener('click', () => {
    modal.classList.add('modal--hidden');
    modal.classList.remove('modal--visible');
});

Buenas comunidad, aquí les dejo una forma diferente de realizar los eventos click sin escribir tantas lineas de código y para todos los buttons.

	<section class="footer">
                <div  onclick="visibleModal()">
                    <img src="https://i.ibb.co/tKWqw8J/spiderman.png" alt="spiderman">
                </div>

                <div  onclick="visibleModal()">
                    <img src="https://i.ibb.co/Xzsdvgg/robin.png" alt="robin">
                </div>

                <div  onclick="visibleModal()">
                    <img src="https://i.ibb.co/M18p91c/batman.webp" alt="batman">
                </div>
            </section>

Y el script es el siguiente

const modal = document.querySelector('.modal');
const buttonClose = document.querySelector('.modal-content-close');

const visibleModal = () => {
    modal.classList.remove('hidden')
    modal.classList.add('visible')
}

buttonClose.addEventListener('click', () => {
    modal.classList.remove('visible')
    modal.classList.add('hidden')
})

Recuerden que el css el navegador procesa los estilos desde el primero hasta el ultimo, si primero colocan los estilos del .hidden y luego .vissible, al momento de renderizar siempre quedaran los del .visible porque es el ultimo en cargar

Si necesitan íconos para sus proyectos, pueden visitar la página de evericons.

Para no crear variables por cada superhéroe, podemos usar el método querySelectorAll y después de ello un forEach para darles el addEventListener.

const modal_triggers = document.querySelectorAll('.footer__images')

modal_triggers.forEach(
  e => e.addEventListener(
    'click', () => modal.classList.remove('hidden')
  )
)

2-27-22

no hace falta usar el important con mejorar la especificidad basta.

.modal.hidden{
display: none;
}

.modal.visible{
display: grid;
}

.modal{
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.5);
position: absolute;
z-index: 4;

display: grid;
place-items: center;

}

.modal.visible es cuando elemento tiene la clases “modal visible”

.modal.hidden es cuando el elemento tiene las clases
"modal hidden"

por ejemplo:

.padre .visible aqui estamos seleccionando un elemento con la clase “visible” que se encuentra dentro de otro elemento con la clase “padre”

.padre.visible aqui hacemos referencia a un elemento tiene las clases “padre visible”

Mi solución con un metodo forEach y querySelectorAll

Buenas, así me quedo a mí por si alguien le interesa

JavaScript

const images = document.querySelectorAll('.img');
const modal = document.querySelector('.modal')

images.forEach(image => {
  image.addEventListener("click", () => {
    modal.classList.remove('hidden')
    modal.classList.add('visible')
  })
});

const close = document.querySelector('.icon-close')

close.addEventListener('click', () => {
  modal.classList.remove('visible')
  modal.classList.add('hidden')
})

HTML

<div>
	<img class="img"  src="/public/assets/joker.png" width="160px" alt="image joker lego">
</div>
<div>
	<img class="img" src="../public/assets/deadpool.png" width="200px" alt="image deadpool lego">
</div>
<div>
	<img class="img" src="../public/assets/spiderman.png" width="200px" alt="image spiderman lego">
</div>

Sass

.hidden {
  display: none;
}

.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.5);
  position: absolute;
  z-index: 4;
}

.modal-content {
  position: relative;
  background-color: $color-primary;
  width: 50%;
  height: 50%;

  img {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 35px;
    cursor: pointer;
  }
}

Consejo 😃

Actualmente estoy trabajando para un proyecto de factoring como frontend developer y puedo decir que si es mala practica el !Important ,no considero excepciones al respecto , debido a desarrolladores pasados me he topado con código de CSS muy dificil de manipular o directamente inmanipulable esto debido a !important regados por ahí ,recordemos que el código debe ser siempre reusable y escalable ,así que bajo ninguna circunstancia usen !important ,no notaran el problema si no hasta que el proyecto tenga miles y miles de líneas de código en solo estilos

En JavaScript existe un concepto que es muy importante y se pregunta mucho en las entrevistas y es: Event Delegation , es una tecnica que involucra añadir un Event Listener al padre del elemento en lugar del añadirselo a los elementos descendientes.

Lo que hice fue añadirle el evento click al padre .footer__content y con el target logro detectar a cual elemento hijo se le esta haciendo click. Esto me permite que ahorrar mucho codigo y por si algun motivo quiero añadir otro personaje no tengo que añadirle un evento a cada hijo.

// HTML CODE
<section class="footer__content">
  <div>
    <img src="./assets/spiderman.png" alt="spiderman">
  </div>
  <div>
    <img src="./assets/robin.png" alt="robin">
  </div>
  <div>
    <img src="./assets/batman.webp" alt="batman">
  </div>
</section>

// JAVASCRIPT CODE
const button = document.querySelector('.footer__content');
const modal = document.querySelector('.modal');

button.addEventListener('click', handleModal)

function handleModal(e) {
    const element = ['DIV', 'IMG'];
    const target = e.target.tagName;
    
    if (element.includes(target)) {
        modal.classList.remove('hidden');
    }
}

para mas informacion:

• https://betterprogramming.pub/event-delegation-in-javascript-boost-your-app-performance-5f10f25cec96

• https://dmitripavlutin.com/javascript-event-delegation/

HTML semantico y accesible:

<section class="modal hidden">
	<div class="modal__content">
		<button
			class="modal__close-btn"
			id="modal__close-btn"
			title="button to close modal"
		></button>
	</div>
</section>

.
Estilos usando Sass:

.
JS

Solucioné de la siguiente manera los eventos de click para cada imagen.

Coloqué una clase a cada div del footer :

<section class="footer">
        <div class="buttonImage" id="button1">
          <img src="https://i.ibb.co/tKWqw8J/spiderman.png" alt="spiderman">
        </div>

        <div class="buttonImage" id="button2">
          <img src="https://i.ibb.co/Xzsdvgg/robin.png" alt="robin">
        </div>

        <div class="buttonImage" id="button3">
          <img src="https://i.ibb.co/M18p91c/batman.webp" alt="batman">
        </div>
      </section>

Y los usé desde Javascript trayendolos con un querySelectorAll(). Lo que me retorna un NodeList para así poder usar el metodo forEach() y recorrerlos escribiendo un solo evento para cada uno.

const modal = document.querySelector('.modal')
const allButtonsImages = document.querySelectorAll('.buttonImage')
const closeButton = document.querySelector('.modal__content--close')

allButtonsImages.forEach(simpleButton => {
  simpleButton.addEventListener('click', ()=>{
    modal.classList.remove('hidden')
    modal.classList.add('visible')
  })
})

closeButton.addEventListener('click', () => {
  modal.classList.remove('visible')
  modal.classList.add('hidden')
})

¿Quién más pensó que sería buena idea que Estefany haga el curso de JS tambien 😍?