Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
jumper171

Projeto do trabalho

Perguntado por jumper171

Pergunta

jumper171    0

jumper171
Postado

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>&times;</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

0 respostas a esta questão

Recommended Posts

Até agora não há respostas para essa pergunta

Ir para lista de Perguntas Perguntas e respostas rápidas
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito