Uma das coisas que mais faço no trabalho com Javascript é criar modais. Mesmo assim, sempre me atrapalho quando preciso incluir vários na mesma página. Na pressa, acabava criando uma função para cada modal e no fim acabava com um código gigantesco, sem falar no trabalho de criar uma nova função para cada modal que fosse incluído no futuro.
Acabei então deixando pronta uma solução simples, para quando preciso criar vários modais, sem precisar me preocupar com o javascript toda vez que for incluir um novo.
Primeiro crio um botão para ativar o primeiro botão, que pode ser replicado para todos os modais seguintes.
Coloco nele a classe bt-modal para identificá-lo como um botão de modal e o atributo data-btmodal para especificar a qual dos modais ele se refere.
Crio uma div que envolve tudo que deve ter a classe bg_modal, para identificá-la como o fundo escuro atrás do modal aberto, e o atributo data-modal para especificar de qual dos modais estamos falando. O valor desse atributo deve ser o mesmo do data-btmodal do seu relativo botão.
Além disso, ainda temos uma div com a classe modal, para todo o conteúdo do modal, e dentro dela o botão de fechar com a classe bt-fechar.
Para que o modal funcione corretamente, a classe bg_modal precisa ter as seguintes propriedades:
position: fixed; /*para não rolar com a página*/
top: 0; left: 0; right: 0; bottom: 0; /*para posicionar em todas as extremidades da tela*/
background: rgba(0,0,0,0.8); /*cria o filtro preto transparente sobre o resto do conteúdo da página*/
display: flex; align-items: center; justify-content: center; /*centraliza o modal no meio da tela*/
display: none; /* oculta o modal quando ele não está ativo*/
Além disso, o modal ativo recebe a classe active, que tem a propriedade display:flex;
Para o javascript, primeiro encontro todos os elementos necessários:
var btsModal = document.querySelectorAll('.bt-modal'); /*encontra todos os botões de abrir um modal*/
var btsFechar = document.querySelectorAll('.bt-fechar'); /*encontra todos os botões de fechar*/
var allModal = document.querySelectorAll('.bg_modal'); /*encontra todos os modais*/
Depois crio as funções para abrir e fechar os modais:
function abrirModal () {
var attrBtModal = event.target.getAttribute('data-btmodal'); /*pega o atributo data-btmodal do target*/
document.querySelector('[data-modal="' + attrBtModal + '"]').classList.add('active'); /*encontra qual modal tem o atributo data-modal igual ao data-btmodal do target e adiciona a classe active*/
}
function fecharModal() {
for (var elModal of allModal) {
elModal.classList.remove('active'); /*remove a classe active de qualquer modal que estiver aberto*/
}
}
E finalmente chamo as funções, a primeira quando um botão de abrir o modal é clicado:
for (var elBtModal of btsModal) {
elBtModal.addEventListener('click', abrirModal);
}
E segunda, quando o botão de fechar é clicado:
for (var elBtFechar of btsFechar) {
console.log(btsFechar);
elBtFechar.addEventListener('click', fecharModal);
}
O resultado final é esse:
See the Pen Multiplos Modais by Nathalie Almeida (@natdrabik) on CodePen.
