0
314
VistasAbrir modal usando JavaScript (no jQuery)
Estoy tratando de reutilizar un código que obtuve de Codepen. Está escrito usando jQuery pero quiero reescribir el script usando JavaScript.
El codepen original (ver: Codepen ) muestra algunas formas de abrir una ventana modal usando animación. Estoy usando la animación 'DESPLEGABLE'.
El Codepen usa el siguiente jQuery:
$('.button').click(function(){ var buttonId = $(this).attr('id'); $('#modal-container').removeAttr('class').addClass(buttonId); $('body').addClass('modal-active'); }) $('#modal-container').click(function(){ $(this).addClass('out'); $('body').removeClass('modal-active'); });Estoy tratando de reescribir esto como JavaScript.
Tengo el modal para abrir con el siguiente JavaScript:
let button = document.getElementById('start'); let body = document.body; button.addEventListener('click', () => { document.getElementById('modal-container').classList.add('one'); body.classList.add("modal-active"); });¡PERO, no puedo hacer que se cierre!
Intenté lo siguiente pero no funciona correctamente (en comparación con el Codepen original):
let button2 = document.getElementById('modal-container'); button2.addEventListener('click', () => { document.getElementById('modal-container').classList.add('out'); document.getElementById('modal-container').classList.remove('one'); body.classList.remove("modal-active"); });Esperando que alguien pueda mostrarme dónde me he equivocado.
Gracias.
2 Respuestas
Responde la pregunta0
Tal vez intente no eliminar la clase "uno" cuando haga clic en el botón2
let button2 = document.getElementById('modal-container'); button2.addEventListener('click', () => { document.getElementById('modal-container').classList.add('out'); body.classList.remove("modal-active"); });Porque cuando inspecciono el código en el codepen, el div con el "contenedor modal" todavía tiene la clase "uno" cuando cerramos el modal
0
Gracias a Indana Rishi, llegué al siguiente código que, aunque probablemente no sea tan elegante, ciertamente funciona:
let button = document.getElementById('start'); let body = document.body; button.addEventListener('click', () => { document.getElementById('modal-container').classList.remove('one'); document.getElementById('modal-container').classList.remove('out'); document.getElementById('modal-container').classList.add('one'); body.classList.add("modal-active"); }); let modcon = document.getElementById('modal-container'); modcon.addEventListener('click', () => { document.getElementById('modal-container').classList.add('out'); body.classList.remove("modal-active"); });