0

El primer botón con la clase="nuevoSalon" funciona bien el problema esta en el segundo con la clase="nuevoSalon2" ahí no me abre el modal. He intentado dejar el mismo nombre de la clase y utilizar el mismo código del JS pero tampoco ha sido posible. Dejo las secciones del html y el código del JS que he utilizado.

html

<a href="#" class="nuevoSalon">&nbsp;Nuevo Salón</a>

<a class="iconoAccionEditar nuevoSalon2"
href="Controlador?menu=Salones&accion=Cargar&id=<%=salon.getNombre_salon()%>"><i class="fas fa-edit"></i>&nbsp;Editar</a>

Javascript

let cerrar = document.querySelectorAll(".close")[0];
let cerrar2 = document.querySelectorAll(".cancelarNuevoSalon")[0];
let abrir = document.querySelectorAll(".nuevoSalon")[0];
let abrir2 = document.querySelectorAll(".nuevoSalon2")[0];
let modal = document.querySelectorAll(".modal")[0];
let modalC = document.querySelectorAll(".modal-container")[0];

abrir.addEventListener('click',function(e){
    e.preventDefault();
    modalC.style.opacity = "1";
    modalC.style.visibility = "visible";
    modal.classList.toggle("modal-close");
});

abrir2.addEventListener('click',function(e){
    e.preventDefault();
    modalC.style.opacity = "1";
    modalC.style.visibility = "visible";
    modal.classList.toggle("modal-close");
});

cerrar.addEventListener("click",function () {
    modal.classList.toggle("modal-close");
    
    setTimeout(function () {
        modalC.style.opacity = "0";
        modalC.style.visibility = "hidden";
    },1000)
})

cerrar2.addEventListener("click",function () {
    modal.classList.toggle("modal-close");
    
    setTimeout(function () {
        modalC.style.opacity = "0";
        modalC.style.visibility = "hidden";
    },1000)
})

window.addEventListener("click",function(e) {
    console.log(e.target)
    if(e.target == modalC){
        modal.classList.toggle("modal-close");
    
        setTimeout(function () {
            modalC.style.opacity = "0";
            modalC.style.visibility = "hidden";
        },1000)
    }
})
2
  • Saludos. Puede ser por que en href uno tiene # y otro una url; prueba ambos con # en href. Con el cambio de funcionar como esperas (en relación a mostrar el modal); entonces la url y parámetros deberás checar como pasarlos como corresponde. Commented el 15 oct. 2021 a las 2:50
  • Es correcto al dejar ambos href="#" abre desde ambos botones la ventana modal el problema ahora es que necesito que el segundo botón pueda cargar la información del controlador que le solicitaba inicialmente, ¿Cómo puedo hacer ambas cosas? Commented el 15 oct. 2021 a las 16:32

1 respuesta 1

0

La manera adecuada sería usar la misma class nuevoSalon para abrir el modal. Puede haber cientos de botones o enlaces con class nuevoSalon para abrir el mismo modal.

<a href="#" class="nuevoSalon">&nbsp;Nuevo Salón</a>

<a class="iconoAccionEditar nuevoSalon" href="Controlador?menu=Salones&accion=Cargar&id=<%=salon.getNombre_salon()%>"><i class="fas fa-edit"></i>&nbsp;Editar</a>

Y en tu javascript puedes hacer simplemente así:

let abrir = document.querySelectorAll(".nuevoSalon");

abrir.forEach(function(click) {
 click.addEventListener("click", function() {
  modal.classList.toggle("modal-close");
 })
}) 

Por supuesto, la clase .modal.modal-close debe tener el estilo para visualizar el modal (que debería llamarse modal.open ó .modal.show):

.modal.modal-close {
 opacity: 1;
 visibility: visible;
}
1
  • Realice los cambios que sugeriste pero me funcionaba tal cual como lo tenia antes, la única manera de abrir la modal con el otro botón fue dejando el href="#" pero por ende ya no se carga la información que solicitaba anteriormente, ¿Cómo puedo ejecutar ambas cosas? Commented el 15 oct. 2021 a las 16:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.