1

Olá estou desenvolvendo duas modais para minha empresa e estou enfrentando a seguinte dificuldade eu tenho 2 modais uma que carrega um popup de feedback do cliente e outra que mostra uma tela de repassar pedido, só que eu estou reaproveitando o css do fundo transparente da área externa da modal, que quando for clicado fecha a modal. porém estou tendo problemas ao identificar esse fundo no javascript, ele só fecha a modal de repasse e não fecha a modal de feedback do cliente. Segue abaixo o código:

HTML

<!--A modal POSITIVA -->
<div id="customer-feedback-modal" class="modal">

    <!--Conteúdo da modal-->
    <div class="modal-content">
       //minha implementação
    </div>
</div>

<div id="pass-order-modal" class="modal"> 
    <div id="modal-content" class="modal-content">
       //minha implementação
    </div>
</div>

CSS

.modal {
display: none; /* Escondido por padrão */
position: fixed; /* Sempre a mesma posição */
z-index 1; /*fica na frente do conteúdo do site */
left: 0;
top: 0;
width: 100%; /*largura total*/ 
height: 100%; /*altura total*/
overflow: auto; /*para habilitar o scroll se necessário*/
background-color:rgb(0,0,0); 
background-color:rgba(0,0,0,0.4); /*fundo preto transparente*/
}

/*-----------------------------------------CONTEÚDO DO BOX DA MODAL------------------------------------*/
.modal-content {
position: relative;
display: flex;
flex-flow: column;
background-color: #fefefe;
margin: 15% auto; /*15% de distância do top e auto para centralizar o conteúdo*/
padding: 0;
border: 1px solid #888;
width: 40%; /*pode ser mais ou menos dependendo do tamanho da tela*/
box-shadow: 0 4px 8px 0 rgba (0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
animation-name:animatetop;
animation-duration:0.4s;
border-radius: 8px;

}

JAVASCRIPT

    /*--------------------------MODAL DE FEEDBACK------------------------*/

    //Linka o modal
    var modal = document.getElementsByClassName('modal')[0];

    //Pega o botão que abre o modal positivo
    var btnPos = document.getElementById('btnPositive');

    //Pega o botão que abre o modal negativo
    var btnNeg = document.getElementById('btnNegative'); 

    //Pega o span que fecha a modal
    var span = document.getElementById('close-customer-feedback-modal');

    //Pega o body do modal para manipular a cor de fundo
    var modalBody = document.getElementById('modal-body');

    //Pega o texto do feedback do usuário pra dizer se ele gostou ou não e setar a respectiva cor
    var customerFeedBackText = document.getElementsByClassName('customer-feedback-text')[0];

    /*Pega o segundo tópico da modal para ficar manipulando, 
    para ficar manipulando a mensagem entre pontos positivos e pontos negativos*/
    var importantPoints = document.getElementById('important-points');

    //clique do botão para abrir (isso será substituido pelo botão de ver avaliação)
    btnPos.onclick = function() {
        modal.style.display = "block";
        modalBody.style.background = "#E3ECD0";
        customerFeedBackText.innerHTML = "GOSTOU";
        customerFeedBackText.style.color = "#33691E";
        importantPoints.innerHTML = "Pontos positivos";
    }

    //clique do botão para abrir (isso será substituido pelo botão de ver avaliação)
    btnNeg.onclick = function() {
        modal.style.display = "block";
        modalBody.style.background = "#F1D1D1";
        customerFeedBackText.innerHTML = "NÃO GOSTOU";
        customerFeedBackText.style.color = "#964242";
        importantPoints.innerHTML = "Pontos negativos";
    }

    //clique do botão de fechar
    span.onclick = function () {
        modal.style.display = "none";
    }

    //fecha o modal se o usuário clicar em alguma área fora dele
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    /*----------------MODAL DE REPASSAR O PEDIDO---------------------------*/
    //Linka o modal de repassar o pedido
    var modalPassOrder = document.getElementsByClassName('modal')[1];

    //Pega o botão de teste do modal
    var btnOpenModalPassOrder = document.getElementById('btnPassOrder');

    //Pega o span de close do modal de passar pedido
    var spanPassOrder = document.getElementById('close-pass-order-modal');

    /*Recupera o modal-content para aumentar sua dimensões, eu fiz isso para não ter que criar um novo
    class no css*/
    var modalContent =  document.getElementById('modal-content');

    btnOpenModalPassOrder.onclick = function (event) {
        modalPassOrder.style.display = "block"
        modalContent.style.width = "80%";
        modalContent.style.height = "80%";
        modalContent.style.margin = "5% auto";
        spanPassOrder.style.marginTop = "0.8%";
    }

    spanPassOrder.onclick = function (event) {
        modalPassOrder.style.display = "none";
    }

    window.onclick = function (event) {
        if (event.target == modalPassOrder) {
            modalPassOrder.style.display = "none";
        }
    }

Se puderem me ajudar fico agradecido

1 Resposta 1

0

Depois de algum tempinho pensando, achei a solução do meu problema, de alguma forma o JS não conseguia diferenciar os 2 backgrounds das minhas duas modais quando eles eram clicados através do window.onclick como estava abaixo:

//fecha o modal se o usuário clicar em alguma área fora dele
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

window.onclick = function (event) {
    if (event.target == modalPassOrder) {
        modalPassOrder.style.display = "none";
    }
}

então tudo que eu tive que fazer foi substituir o window por cada um dos fundos das minhas modais, ficando então desta maneira:

//fecha o modal se o usuário clicar em alguma área fora dele
modal.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

modalPassOrder.onclick = function (event) {
    if(event.target == modalPassOrder) {
        modalPassOrder.style.display = "none";
        createDeliveryIcon.onDeliveryIconChanged(deliverymanMakersList);
    }
}

e pronto, funcionou perfeitamente!!! simples porém deu um trabalhinho até descobrir isso...

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 .