const fechar = document.querySelector(".fechar")
createCardsCandidatos(dados);
function createCardsCandidatos(listaCandidatos) {
listaCandidatos.forEach((candidato) => {
const candidatoEl = document.createElement("div");
candidatoEl.classList.add("item");
candidatoEl.innerHTML = `
<img class="box-filme" src="${candidato.caminhoImg}">
`;
const candidatoModal= document.createElement("div")
candidatoModal.classList.add("container-modal")
candidatoModal.innerHTML=`
<div class="modal" id="iniciamodal">
<button href="fechar" title="Fechar" class="fechar">X</button>
<img src="${candidato.caminhoImg}">
<h1>${candidato.titulo}</h1>
<h4>${candidato.descricao}</h4>
<p>${candidato.fonte}</p>
</div>
`
document.getElementById("carousel").appendChild(candidatoModal);
document.getElementById("carousel").appendChild(candidatoEl);
candidatoEl.addEventListener("click", () => {
candidatoModal.style.display="block"
});
fechar.addEventListener("click", () => {
candidatoModal.style.display="none";
})
});
}
-
Tentei também, mas não funcionou.– Rafael Ribeiro12/05 às 19:22
1 Resposta
Pelo que compreendi no seu código, você está criando vários elementos de modal, um para cada item do objeto que você percorre com o foreach, porém todos eles recebem o mesmo ID. Para cada um desses elementos de modal você instancia um evento para estabelecer o "display:block" e instancia outro evento para estabelecer o "display:none". Seu código tende a não funcionar ao trabalhar com ID repetido, pois ID deve ser único, porém me parece que esse não seja o problema.
Porquê você não cria uma função única responsável por popular o conteúdo do modal e trabalha com um único elemento de modal? Faça algo no javascript como:
function abrirModal(titulo, descricao, fonte) {
document.querySelector('.modal h1').innerText = titulo;
document.querySelector('.modal h4').innerText = descricao;
document.querySelector('.modal p').innerText = fonte;
document.querySelector('.modal').style.display = "block";
}
function fecharModal() {
document.querySelector('.modal').style.display = "none";
}
E no html, faça algo como:
<div class="modal" id="iniciamodal">
<button href="fechar" title="Fechar" class="fechar" onclick="fecharModal()">X</button>
<h1></h1>
<h4></h4>
<p></p>
</div>
E então o modal pode ser aberto usando um botão como por exemplo:
<button type="button" onclick="abrirModal('Titulo teste', 'Descrição teste do candidato', 'Fonte teste do candidato')">Titulo teste</button>
Baseado nisso você usa o seu foreach no javascript para criar uma lista de elementos no html que darão o gatilho para abrir o modal.
Talvez existam erros de sintaxe no código, eu escrevi sem testar. Só para apresentar a ideia mesmo. Espero ter sido útil! Sucesso!
-
O problema maior está na hora de fechar a janela do modal com as informações do modal, ela simplesmente não fecha, já tentei fazer de tudo, inclusive adicionei a sua função de fechar, mas também não funcionou, estou perdido já rs 12/05 às 19:20
-
Entendo que o problema maior está na sua estrutura como um todo, e isso está gerando o bug no fechamento do modal. A forma que eu sugeri é uma reformulação quase que completa da sua estrutura, e dessa forma funcionará. Uso essa estrutura dessa mesma forma para a lógica de modal nos meus projetos. O correto é sempre usar um único modal tendo suas informações populadas em tempo real pelo js. Criar um modal para cada item não é a melhor prática. Faça um teste! Boa sorte! 13/05 às 19:23