¿Cómo puedo usar un modal como alert?

publicado por: Anonymous

tengo un problema y es que quiero hacer un login en bootstrap, y al momento de presionar el botón este abra un archivo javascript para comparar los campos del login y de ahí si es correcto muestre un modal y si es incorrecto muestre otro modal.

Este es mi js

_x000D_

_x000D_

function validar(form){_x000D_
        _x000D_
    if(form.usuario.value != "Admin") {_x000D_
        _x000D_
    form.usuario.focus();return false;_x000D_
    }_x000D_
    if(form.password.value != "Admin123") {_x000D_
    _x000D_
        form.password.focus();return false;_x000D_
    }_x000D_
    return true;_x000D_
    _x000D_
    }

_x000D_

<div class="container" id="cuerpo">_x000D_
  <div class="card card-outline-secondary">_x000D_
        <div class="card-header">_x000D_
            <h3 class="mb-0">Punto de Acceso</h3>_x000D_
        </div>_x000D_
        <div class="card-body">_x000D_
            <form class="form" role="form" autocomplete="off" id="loginForm" novalidate="" action="#" method="post" onsubmit="return validar(this);">_x000D_
                <div class="form-group">_x000D_
                    <label for="uname1">Usuario</label>_x000D_
                    <input type="text" class="form-control" name="usuario" id="uname1" required="">_x000D_
_x000D_
                </div>_x000D_
                <div class="form-group">_x000D_
                    <label>Contraseña</label>_x000D_
                    <input type="password" class="form-control" id="password" required="" autocomplete="new-password">_x000D_
_x000D_
                </div>_x000D_
                <div class="form-check small">_x000D_
                    <label class="form-check-label">_x000D_
                        <input type="checkbox" class="form-check-input"> <span>Recordar en este equipo</span>_x000D_
                    </label>_x000D_
                </div>_x000D_
                <button type="submit" class="btn btn-primary btn-lg float-right" data-toggle="modal" data-target="#myModal" id="btnLogin">Entrar</button>_x000D_
            </form>_x000D_
        </div>_x000D_
        <!--/card-body-->_x000D_
    </div>_x000D_
_x000D_
    <div id="myModal" class="modal fade" role="dialog">_x000D_
            <div class="modal-dialog">_x000D_
_x000D_
              <!-- Modal content-->_x000D_
              <div class="modal-content">_x000D_
                <div class="modal-header" id="modal-header">_x000D_
                  <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
_x000D_
                </div>_x000D_
                <div class="modal-body">_x000D_
                  <p>Usuario o contraseña Incorrecta._x000D_
                     </p>_x000D_
                </div>_x000D_
                <div class="modal-footer">_x000D_
                  <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>_x000D_
                </div>_x000D_
              </div>_x000D_
_x000D_
            </div>_x000D_
          </div>_x000D_
    </div>_x000D_
_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

podrias hacer algo como esto:

_x000D_

_x000D_

<!doctype html>_x000D_
<html lang="en">_x000D_
  <head>_x000D_
    <!-- Required meta tags -->_x000D_
    <meta charset="utf-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">_x000D_
_x000D_
    <!-- Bootstrap CSS -->_x000D_
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">_x000D_
_x000D_
    <title>Hello, world!</title>_x000D_
  </head>_x000D_
  <body>_x000D_
_x000D_
   <form class="form-signin">_x000D_
  <h1 class="h3 mb-3 font-weight-normal">Login</h1>_x000D_
  <label for="inputEmail" class="sr-only">Usuario</label>_x000D_
  <input type="text" id="usuario" class="form-control" placeholder="usuario" required autofocus>_x000D_
  <label for="inputPassword" class="sr-only">Clave</label>_x000D_
  <input type="password" id="clave" class="form-control" placeholder="clave" required>_x000D_
  <button class="btn btn-lg btn-primary btn-block" type="button" onclick="validarSesion();">Iniciar Sesión</button>_x000D_
</form>_x000D_
_x000D_
_x000D_
<div class="modal" tabindex="-1" role="dialog" id="modalMensaje">_x000D_
  <div class="modal-dialog" role="document">_x000D_
    <div class="modal-content">_x000D_
      <div class="modal-header">_x000D_
        <h5 class="modal-title badge badge-success">MENSAJE</h5>_x000D_
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">_x000D_
          <span aria-hidden="true">&times;</span>_x000D_
        </button>_x000D_
      </div>_x000D_
      <div class="modal-body">_x000D_
        <p id="mensaje"></p>_x000D_
      </div>_x000D_
      <div class="modal-footer">_x000D_
        <button type="button" class="btn btn-danger" data-dismiss="modal">SALIR</button>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
_x000D_
_x000D_
    <!-- Optional JavaScript -->_x000D_
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->_x000D_
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>_x000D_
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>_x000D_
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
  </body>_x000D_
</html>_x000D_
<script>_x000D_
function validarSesion(){_x000D_
	usuario = 'root';_x000D_
  clave = '123456';_x000D_
  _x000D_
  var usuarioIngresado = $("#usuario").val();_x000D_
  var claveIngresado = $("#clave").val();_x000D_
  if((usuario == usuarioIngresado) && (clave == claveIngresado )){_x000D_
  	MENSAJE = "ACCESO CORRECTO ..!!";_x000D_
       $("#mensaje").html(MENSAJE);_x000D_
    $("#modalMensaje").modal('show');_x000D_
  }else{_x000D_
   MENSAJE = "ACCESO INCORRECTO ..!!";_x000D_
   $("#mensaje").html(MENSAJE);_x000D_
   $("#modalMensaje").modal('show');_x000D_
  }_x000D_
}//end function validarSesion_x000D_
</script>

_x000D_

_x000D_

_x000D_

Si te fijas uso una funcion validarSesion la misma mediante jquery y con el ID obtengo el usuario y clave ingresados, luego los comparo con unas variables previamente establecidades usuario y clave en caso de que coincidan muestro una ventana modal con un mensaje, caso constrario cun otro distinto.
Hice con la misma modal para optimizar dado que sera como alerta como lo mencionas. pero puedes adaptarla a tus necesidades, espero te sirva y guie..!!

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *