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