1

Preciso de ajuda que ao clicar em um nome abra a tela para enviar mensagens, e ao clicar em outro nome feche a janela anterior e abra a nova e assim em diante

<li><a href="javascript:void(0)" id="user" class="class_1">Fulano 01</a></li>

<li><a href="javascript:void(0)" id="user" class="class_2">Fulano 02</a></li>`

<li><a href="javascript:void(0)" id="user" class="class_3">Fulano 03</a></li>

function modal(modalID){
    const modal = document.getElementById(modalID);
    if (modal) {
        modal.classList.add('open');
        modal.addEventListener('click', (e) => {
            if (e.target.id == modalID) {
                modal.classList.remove('open');
            }
        });
        console.log(modal, e.target.id);
 }
}

puxo as id do banco e chamo a função pra abrir as janelas

const class_<?php echo $list['id'];?> = document.querySelector('.class_<?php echo $list['id'];?>');

class_<?php echo $list['id'];?>.addEventListener('click', () => modal('id_<?php echo $list['id'];?>'));


<div id="id_1" class="modal">1</div>
<div id="id_2" class="modal">2</div>
<div id="id_3" class="modal">3</div>

<style>
  .modal {display: none;}
  .modal.open {display: block;}
</style>

1 Resposta 1

1

Pelo que eu entendi do seu código, se você declarar a variável "modal" no exterior da sua função, vc consegue fechar sem problema.

var modal;

function modal(modalID){
    if(modal) {
        modal.classList.remove('open');
    }
    modal = document.getElementById(modalID);
    if (modal) {
        modal.classList.add('open');
        modal.addEventListener('click', (e) => {
            if (e.target.id == modalID) {
                modal.classList.remove('open');
            }
        });
        console.log(modal, e.target.id);
    }
}
2
  • como assim if(modal) { modal.classList.remove('open'); } não entendi essa parte, fecha o modal antes de abrir
    – goio
    Commented 29/05/2019 às 5:12
  • Sim, para fechar o modal anterior antes de abrir o novo, como você disse q quer fazer. Commented 29/05/2019 às 17:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .