Call modal window inside php code

Asked

Viewed 519 times

-1

i have this login page below and I always want Submit to be clicked and the text inputs to be empty a modal window to be opened when the php verification code is executed as well.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Area | Account Login</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>


    <script>

    </script>


  </head>
  <body>

    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Area Administrativa</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">

        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <header id="header">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1 class="text-center">Area Administrativa <small>Login de Agentes</small></h1>
          </div>
        </div>
      </div>
    </header>

    <section id="main">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-md-offset-4">
            <form id="login" method="POST" class="well">
                  <div class="form-group">
                    <label>Agente Fiscalizador</label>
                    <input type="text" class="form-control" placeholder="Nome de Angente" name="nome" id="nome">
                  </div>
                  <div class="form-group">
                    <label>Senha</label>
                    <input type="password" class="form-control" placeholder="Senha" name="password" id="senha">

                  </div>
                  <button type="submit" class="btn btn-default btn-block" id="log">Login</button>

              </form>


              <?php


              if(isset($_POST['nome']) && isset($_POST['password']))
              {
                $nome = $_POST['nome'];
                $password = $_POST['password'];

                if(!empty($nome) && !empty($password))
                {
                  $funcoes->conectar("localhost", "sistema_de_reboques", "root", "");

                  if($funcoes->logar($nome, $password) == true)
                  {
                    header("Location:index.html");
                    echo "Entrou";
                  }
                  else
                  {

                    echo "<h5 align='center' >Agente ou Senha Errados!</h5>";
                  }


                }
                else
                {

                  ?>
                  <script>
                   <script type="text/javascript">
                    $(function()
                      {
                         $("#log").click(function(e){

                        $("#mymodal").modal("toggle");

                        });
                      });

                </script>
                  </script>

                  <?php
                  echo "<h5 align='center' >Preencha os Campos Vazios!</h5>";
                }
              }

              ?>


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






    <footer id="footer">
      <p>Copyright Sistema de Reboques, &copy; 2019</p>
    </footer>


    <!--Janela Modal -->
     <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Necessário efetuar pagamento</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <a href="pagar.php"><button type="button" class="btn btn-primary">Pagar Agora</button></a>
                    </div>
                </div>
            </div>
        </div>




  <script>
     CKEDITOR.replace( 'editor1' );
 </script>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
php javascript jquery

  • To open the modal you use .modal('show').

1 answer

0

Like Sam said, to specifically display a modal, you use $('seletor').modal('show'). The .modal('toggle') probably would work in this case, but the problem I see is that the Bootstrap Javascript library is being included on the page at the bottom of the page, so it is after the code you run to display the modal.

I see two ways out in this case:

  • Move Bootstrap Javascript loading into the HEAD tag
  • Change the code $(function(){ for $(document).load(function{. This way, the script would only run after the full page load, which includes loading all Javascript files.

Browser other questions tagged php javascript jquery

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