Оказывается, что у меня есть этот простой login, я манипулирую Overhang.js, чтобы показывать сообщение в случае, если верительные грамоты будут неправильными. С этим же самым plugin он мог бы показывать сообщение, когда доступ правилен, но между всеми Вашими выборами ни одна не убеждает меня совсем (темы UI/UX).
Для этого случая, когда будет правилен доступ, я хотел бы манипулировать например, изменение в сообщении input
тип submit
что произошел "Ввождения информацию в компьютер" во "Вводя информацию в компьютер".
Или это мог бы быть также эффект fade как эффект манер Bootstrap, что темнеет экран.
$(document).ready(function() {
$('.background-image').on('webkitAnimationEnd', function(e) {
$(this).addClass('visible');
});
});
/* ---------- GENERAL ---------- */
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100%;
}
body {
background-color: #ebebeb;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
margin: 0;
min-height: 100%;
}
input {
background-image: none;
border: none;
font: inherit;
margin: 0;
padding: 0;
transition: all .3s;
}
/* ---------- ALIGN ---------- */
.align {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ---------- GRID ---------- */
.grid {
margin-left: auto;
margin-right: auto;
max-width: 500px;
max-height: 500px;
width: 80%;
}
/* ---------- LOGIN ---------- */
#login h2 {
background: #0088a3;
border-radius: 15px 15px 0 0;
color: #fff;
font-size: 28px;
padding: 20px 26px;
height: 100%;
}
#login h2 span[class*="fontawesome-"] {
margin-right: 14px;
}
#login fieldset {
background: #fff;
border-radius: 0 0 10px 10px;
padding: 20px 26px;
}
#login fieldset p {
color: #777;
margin-bottom: 14px;
}
#login fieldset p:last-child {
margin-bottom: 0;
}
#login fieldset input {
border-radius: 3px;
}
#login fieldset input[type="text"],
#login fieldset input[type="password"] {
background: #eee;
color: #777;
padding: 4px 10px;
width: 100%;
}
#login fieldset input[type="submit"] {
background: #0088a3;
color: #fff;
display: block;
margin: 0 auto;
padding: 4px 0;
width: 100px;
}
#login fieldset input[type="submit"]:hover {
background: #0088a3;
border-radius: 15px 2px;
cursor: pointer;
}
#login fieldset input[type="submit"]:active {
background: #0088a3;
border-radius: 2px 15px;
cursor: wait;
}
@import "compass/css3";
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: url('../images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
}
.background-image.visible {
opacity: 1;
}
<body class="align">
<div class="align background-image">
<div class="grid">
<div id="login">
<h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>
<form id="loginform" action="validarcode.php" method="POST" autocomplete="off">
<fieldset>
<p><label for="usuario">Usuario</label></p>
<p><input type="text" name="txtusuario" id="usuario" autofocus></p>
<p><label for="password">Contraseña</label></p>
<p><input type="password" name="txtpassword" id="password"></p>
<br><br>
<p><input class="with-arrow" type="submit" name="Enviar" value="Ingresar"> <i class="icon-arrow-right"></i> </p>
<br>
<div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
<h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:mail@mail.com?subject=Restablecer%20Contraseña">mail@mail.com</a></h1>
</fieldset>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="assets/overhang.js"></script>
<script src="assets/app.js"></script>
</body>
Обобщая, я знаю, что с JS я могу показывать этот alert
нажав submit
, но в Вашем месте, как могло бы звонить например оживление в CSS?
function exito() {
alert("Ingresando...");
return true;
}
<input class="with-arrow" type="submit" name="Enviar" value="Ingresar" onclick="return exito();">