Modal Bootstrap does not work

Try to remove the Modal structure where it is located, and place it at the end of the body, so there is no conflict with any elements of the previous grid, such as even a limitation of layer visualization by z-index or rendering. (I do not know the remaining CSS).

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

Good luck

I understand more or less what you are wanting to do, you will have to take this modal from inside the form validacao_usuario.php and send his data via post to his page recuperacao.php. This way it will also work, you will have to leave it, instead of using the button to place in a tag (ancora), then you will have to retrieve the data from it via GET. I hope to have helped, any questions asked again, we will 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>