I have two modals on the same page, but only one of them closes when clicking on the outside

Question

Hello I am developing two modals for my company and I am facing the following difficulty I have 2 modals one that carries a popup of customer feedback and another that shows a screen of repassar request, except that I am reusing the css of the transparent background of the external area of the modal, that when it is clicked closes the modal. but I’m having problems identifying this background in javascript, it only closes the transfer modal and does not close the customer feedback modal. Follow the code below:

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";
        }
    }

If you could help me, I’d be grateful

Answer 1

After some time thinking, I found the solution to my problem, somehow the JS could not differentiate the 2 backgrounds of my two modals when they were clicked through the window.onclick as it was below:

//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";
    }
}

then all I had to do was replace the window with each of the backgrounds of my modals, then staying this way:

//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);
    }
}

And there, it worked perfectly!!! simple but gave a job until you discover this...