Modal Bootstrap does not work

Asked

Viewed 1,165 times

0

I’m trying to use the Gentelella template modal, but when I click on the link, the modal is static and I can’t put information or click on the buttons. Follows code:

<!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>

Can anyone see the error? Thank you!

javascript html5 css3 bootstrap-3

2 answers

1

I understood more or less what you are wanting to do, you will have to take this modal from within the form validacao_usuario.php and send the data from it via post to your page recovery.php. This way ai will also work, you will have to leave so, instead of using (button) put in a tag (anchors) more then you will have to recover the data from it via GET. I hope I’ve helped, any questions ask again, we’ll try to help you in the best way possible.

your code with modifications

<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>

  • Thank you so much for the suggestions, friend. I managed to solve!

  • if you need more help just ask.

0


Try to remove the structure of Modal where it is, and place it at the end of the body, so there is no conflict with any element of the previous grid, as even a limitation of viewing layers by z-index or rendering. (I don’t know the remaining CSS).

Usually modals are always appends at the end of the element code. But it goes from using each one, because in this model used, if you tried to replenish, you would use several modal grids in the code. I suggest you generalize more to use less markup language.

Something else, instead of using the target, put onclick="$('. modal'). modal('show') (only by test)

Good luck

  • Thanks for the info, buddy! I put all the Div modal at the end of the body and it worked.

Browser other questions tagged javascript html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.