POWERED BY:
POWERED BY:
Ao usar o fórum, você concorda com nossos Termos e condições.
Estou fazendo um projeto de satisfação de cliente no meu serviço, porem alguma coisa nao esta saindo corretamente, eu preciso que quando eu clicar na nota, apareça um modal de acordo com a nota selecionada, segue o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Satisfação dos Clientes upFlow</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/estiloo.css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="tudo">
<h1>O que achou do nosso atendimento?</h1>
<br>
<div>
<img class="img-uf" src="imagens/uf-logo.png">
<br>
<br>
<h2>Classificação</h2>
<br>
<br>
<span class="atendimento">Classifique o atendimento de 0 a 10</span>
<br>
<br>
<br>
<br>
<div>
<button class="b0" class="btn-block" data-toggle="modal" data-target="#janela">0</button>
<button class="b1" class="btn-block" data-toggle="modal" data-target="#janela">1</button>
<button class="b2" class="btn-block" data-toggle="modal" data-target="#janela">2</button>
<button class="b3" class="btn-block" data-toggle="modal" data-target="#janela">3</button>
<button class="b4" class="btn-block" data-toggle="modal" data-target="#janela">4</button>
<button class="b5" class="btn-block" data-toggle="modal" data-target="#janela">5</button>
<button class="b6" class="btn-block" data-toggle="modal" data-target="#janela">6</button>
<button class="b7" class="btn-block" data-toggle="modal" data-target="#janela">7</button>
<button class="b8" class="btn-block" data-toggle="modal" data-target="#janela">8</button>
<button class="b9" class="btn-block" data-toggle="modal" data-target="#janela">9</button>
<button class="b10" class="btn-block" data-toggle="modal" data-target="#janela">10</button>
</div>
</div>
<br>
<strong>Deixa sua sugestão abaixo!</strong>
<br>
<br>
<div class="caixa-texo">
<textarea name="post-text" cols="102" rows="5" placeholder="Escreva aqui"></textarea>
</div>
</div>
<form class="modal fade" id="janela">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title"><strong>Obrigado</strong></h4>
</div>
<div class="modal-body">
<STRONG>Sua nota para o atendimento foi x!</STRONG>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Ok
</button>
</div>
</div>
</form>
</body>
</html>
CSS:
.img-uf {
width: 170px;
height: 65px;
}
.atendimento {
font-size: 25px;
color: grey;
}
.b0 {
border-color: #B40404;
background-color: #B40404;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 7px;
}
.b1 {
border-color: #DF0101;
background-color: #DF0101;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b2 {
border-color: #FF4000;
background-color: #FF4000;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b3 {
border-color: #FF8000;
background-color: #FF8000;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b4 {
border-color: #FFBF00;
background-color: #FFBF00;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b5 {
border-color: #FFFF00;
background-color: #FFFF00;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b6 {
border-color: #BFFF00;
background-color: #BFFF00;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b7 {
border-color: #A5DF00;
background-color: #A5DF00;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b8 {
border-color: #74DF00;
background-color: #74DF00;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b9 {
border-color: #3ADF00;
background-color: #3ADF00;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.b10 {
border-color: #01DF01;
background-color: #01DF01;
color: white;
width: 60px;
height: 60px;
margin: 2px;
border-radius: 10px;
}
.tudo {
margin-left: 5px;
}
Compartilhar este post
Link para o post
Compartilhar em outros sites