0

estou tentando usar o modal do template Gentelella, mas quando clico no link, o modal está estático e não consigo colocar informações ou clicar nos botões. Segue código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- Animate.css -->
    <link href="../vendors/animate.css/animate.min.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- bootstrap-progressbar -->
    <link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    

    <!-- Custom Theme Style -->
    <link href="../build/css/custom.min.css" rel="stylesheet">
  </head>

  <body class="login">
    <div>
      
      <a class="hiddenanchor" id="signin"></a>

      <div class="login_wrapper">
        <div class="animate form login_form">
          <section class="login_content">
            <form method="POST" action="validacao_usuario.php">
              <h1>Sistema </h1>
              <div>
                <input type="text" name="usuario" class="form-control" placeholder="Usuário" required />
              </div>
              <div>
                <input type="password" name="senha" class="form-control" placeholder="Senha" required="" />
              </div>
              <div>

                 <button class="btn btn-primary" type="submit">Entrar</button>
               <!-- <a class="reset_pass" href="#">Esqueceu a senha/usuário?</a>-->
               
                <!-- modal esqueceu senha -->
                  <!-- modals -->
                  <!-- Large modal -->
                  
                  <button type="button" class="btn btn-link" data-toggle="modal" data-target=".bs-example-modal-lg">Esqueceu senha/usuário?</button>

                  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">

                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                          </button>
                          <h4 class="modal-title" id="myModalLabel">Recuperação da senha/usuário</h4>
                        </div>
                        <div class="modal-body">
                          <h4>Informe seu email:</h4>
                          
                       <input type="email" id="email" name="email" required="required" class="form-control">
                        
                          </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                          <button type="button" href="recuperacao.php" class="btn btn-primary">Enviar</button>
                        </div>

                      </div>
                    </div>
                  </div>

                  <!-- /modals -->

              </div>


              <div class="separator">
               <a target="_blank" href=""> <img src="images/logo.png"></a>
                  <div>
                  <p><a target="_blank"> <img src="images/logo.png"></a>-Todos os direitos reservados 2017.</p>
                </div>
              </div>
            </form>
          </section>
        </div>

      </div>
    </div>


     <!-- jQuery -->
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="../vendors/nprogress/nprogress.js"></script>
    <!-- bootstrap-progressbar -->
    <script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- iCheck -->
    <script src="../vendors/iCheck/icheck.min.js"></script>


    <!-- Custom Theme Scripts -->
    <script src="../build/js/custom.min.js"></script>
  
  </body>
</html>

Alguém consegue enxergar o erro? Obrigada!

2 Respostas 2

1

Eu entendi mais ou menos o que você esta querendo fazer, você vai ter que tirar esse modal de dentro do form validacao_usuario.php e enviar os dados dele via post para sua pagina recuperacao.php. Desse jeito ai também dará certo, você terá que deixar assim, em vez de utilizar (button) colocar em uma tag (ancora) mais ai você terá recuperar os dados dele via GET. Espero ter ajudado, qualquer duvida pergunta de novo, tentaremos te ajudar da melhor forma possível.

seu código com modificações

<title></title>

<!-- Bootstrap -->
<link href="..../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- Animate.css -->
<link href="../vendors/animate.css/animate.min.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">


<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">

  <a class="hiddenanchor" id="signin"></a>

  <div class="login_wrapper">
    <div class="animate form login_form">
      <section class="login_content">
        <form method="POST" action="validacao_usuario.php">
          <h1>Sistema </h1>
          <div>
            <input type="text" name="usuario" class="form-control" placeholder="Usuário" required />
          </div>
          <div>
            <input type="password" name="senha" class="form-control" placeholder="Senha" required="" />
          </div>
          <div>

             <button class="btn btn-primary" type="submit">Entrar</button>
           <!-- <a class="reset_pass" href="#">Esqueceu a senha/usuário?</a>-->

            <!-- modal esqueceu senha -->
              <!-- modals -->
              <!-- Large modal -->

              <button type="button" class="btn btn-link" data-toggle="modal" data-target=".bs-example-modal-lg">Esqueceu senha/usuário?</button>

              <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">

                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                      </button>
                      <h4 class="modal-title" id="myModalLabel">Recuperação da senha/usuário</h4>
                    </div>
                    <div class="modal-body">
                      <h4>Informe seu email:</h4>

                   <input type="email" id="email" name="email" required="required" class="form-control">

                      </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                      <a href="recuperacao.php" class="btn btn-primary">Enviar</a>
                    </div>

                  </div>
                </div>
              </div>

              <!-- /modals -->

          </div>


          <div class="separator">
           <a target="_blank" href=""> <img src="images/logo.png"></a>
              <div>
              <p><a target="_blank"> <img src="images/logo.png"></a>-Todos os direitos reservados 2017.</p>
            </div>
          </div>
        </form>
      </section>
    </div>

  </div>
</div>


 <!-- jQuery -->
<script src="../vendors/jquery/dist/js/jquery.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="../vendors/iCheck/icheck.min.js"></script>


<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>

2
  • Muito obrigada pelas sugestões, amigo. Consegui resolver! 22/10/2017 às 22:08
  • se precisar de mais ajuda é só perguntar. 23/10/2017 às 22:04
0

Tente retirar a estrutura do Modal onde ele se encontra, e coloque-o no final do body, pra não haver conflito com algum elemento do grid anterior, como até mesmo uma limitação de visualização de camadas por z-index ou renderização. (não conheço o CSS restante).

Geralmente modais sempre são appends no fim do código do elemento. Mas vai da utilização de cada um, porque nesse modelo utilizado, caso tentasse replitar, você usaria vários grids de modal no código. Sugiro que generalize mais para usar menos linguagem de marcação.

Outra coisa, ao invés de utilizar o target, coloque onclick="$('.modal').modal('show') (só por teste mesmo)

Boa sorte

1
  • Obrigada pela informação, amigo! Coloquei toda a Div modal no final do body e funcionou. 22/10/2017 às 22:11

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 .