-
check_circle_outlineMódulo 1 | 4 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 4 clases
Selectores
expand_more -
check_circle_outlineMódulo 3 | 5 clases
Background
expand_more -
check_circle_outlineMódulo 4 | 4 clases
Colores
expand_more -
check_circle_outlineMódulo 5 | 3 clases
Bordes
expand_more -
check_circle_outlineMódulo 6 | 5 clases
Fuentes
expand_more -
check_circle_outlineMódulo 7 | 4 clases
Posiciones
expand_more -
check_circle_outlineMódulo 8 | 3 clases
Margin & Padding
expand_more -
check_circle_outlineMódulo 9 | 6 clases
Imágenes
expand_more -
check_circle_outlineMódulo 10 | 4 clases
Animaciones
expand_more -
check_circle_outlineMódulo 11 | 7 clases
Extras
expand_more -
check_circle_outlineMódulo 12 | 7 clases
Ejercicios
expand_more -
check_circle_outlineMódulo 13 | 9 clases
Flexbox
expand_more -
check_circle_outlineMódulo 14 | 11 clases
CSS Grid
expand_more
9 comentario(s)
//obtener el contenor principal de la modal var modal = document.getElementById('modal');//obtener la imagen a la que se cambiará el atributo src var imgModal = document.getElementById('imgModal');
//obtenemos todas las imágenes del sitio let imagenes = document.querySelectorAll('img');
/* Al dar click sobre cualquier imagen se obtiene su atributo src para mostrarlo en modal */ imagenes.forEach(function (img) { img.addEventListener('click', function () { //obtenemos id de la imagen idImg = img.id;
<em>//obtenemos src de la imagen</em> imgSrc = img.src showModal(idImg, imgSrc); })
});
function showModal(idImg, imgSrc) { /* cambiamos el atributo src a la imagen del modal por el de la imagen en que se dio click */ imgModal.src = imgSrc;
<em>//mostramos el contenedor de la modal</em> modal.style.display = "block";
}
//obtenemos el boton X, lo creé con el id cerrar let btnClose = document.getElementById('cerrar');
//al dar click sobre X ocultamos la modal btnClose.addEventListener('click', function(){ modal.style.display = "none"; });
Yo hice el modal con JavaScript sin jQuery, aquí está el código: x = document.getElementById("idclose"); // obtener botón que cierra por su id modal = document.getElementById("modal"); // obtener el modal por su id imgclic = document.getElementById("open"); // obtener la imagen que abre el modal imgclic.onclick = function () { modal.style.display = "block"; // reemplaza display none por display block para mostrarlo }; x.addEventListener("click", function() { modal.style.display = "none"; // reemplaza display block por display none para mostrarlo });
Si mi computadora no descarga el archivo de jquery y debo copiar todo el texto que aparece cuando debo descargar, cómo sería para anexarlo en el html?