0
我有一个登录弹出。 我从jquery开始，我已经看过很多手册，而不是让我的弹出窗口变得快速响应。这里，我离开的代码弹出来看看，如果你能伸出援助之手，因为我有一周的时间寻找，品尝和...什么:(问题与jQuery弹出响应
//scriptLogin.js archive
$(document).ready(function() {
$('a.login-window').click(function() {
//cojemos los valores de las variables desde el link
var loginBox = $(this).attr('href');
//creamos el popup
$(loginBox).fadeIn(300);
//establecemos el padding + border (css)
var popMargTop = ($(loginBox).height() + 24)/2;
var popMargLeft = ($(loginBox).width() + 24)/2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//añadimos la capa mask al body(para hacer fondo semi negro al abrirse el popup)
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
//cuando clikemos el icono X se cerrara el popup
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});/*LOGIN*/
@media only screen and (max-width: 600px) {
.login-popup{
width:100%;
}
}
#login-box{
\t width:600px;
\t height:auto;
}
.login-popup{
\t display:none;
\t background:#2c3338;
\t padding:10px;
\t border:2px solid #000;
\t float:left;
\t font-size:1.2em;
\t position:fixed;
\t top:40%;
\t left:50%;
\t z-index:99999;
\t color:#606468;
\t font-family:'Calibri';
\t line-height:1.5em;
}
#signin{
\t width:auto;
\t height:auto;
\t margin:3% 0 0 25%;
}
#fondoLogin{
\t background-color:#2c3338;
\t color:#606468;
\t font-family:'Calibri';
\t font-size:14px;
\t line-height:1.5em;
}
#signin span{
\t background-color:#363b41;
\t border-radius:3px 0px 0px 3px;
\t -moz-border-radius:3px 0px 0px 3px;
\t -webkit-border-radius:3px 0px 0px 3px;
\t color:#606468;
\t display:block;
\t float:left;
\t height:50px;
\t line-height:50px;
\t text-align:center;
\t width:50px;
}
#signin input{
\t height:50px;
}
#signin input{
\t background-color:#3b4148;
\t border-radius:0px 3px 3px 0px;
\t -moz-border-radius:0px 3px 3px 0px;
\t -webkit-border-radius:0px 3px 3px 0px;
\t color:#606468;
\t margin:0 0 2% 5%;
\t padding:0 16px;
\t width:198px;
}
#signin input:focus{
\t border:2px solid #785da1;
\t outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
\t width:280px;
\t height:55px;
\t border-radius:3px;
\t -moz-border-radius:3px;
\t -webkit-border-radius:3px;
\t background-color:#624291;
\t color:#eee;
\t font-weight:bold;
\t margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
\t background-color:#7842A6;
}
#signin a{
\t color:#eee;
\t text-decoration:none;
}
#signin a:hover{
\t text-decoration:underline;
}
#signin p{
\t width:300px;
\t height:auto;
}
#signin input{
\t border:none;
\t font-family:'Calibri';
\t font-size:14px;
\t line-height:1.5em;
\t padding:0;
\t -webkit-appearance:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
\t <head>
\t \t <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link href="css/bootstrap.min.css" rel="stylesheet" />
\t \t <link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
\t \t <link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
\t \t <link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
\t \t <title>...</title>
\t </head>
<body>
<div>
\t <header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
\t \t \t \t <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
\t \t \t \t \t <span class="sr-only"> Barra de navegación</span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t </button>
\t \t \t </div>
\t \t \t \t \t
\t \t \t <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<a href="index.php"><img src="fotos/logoH.png" /></a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="registro.php"> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></a></li>
<li><a href="#login-box" class="login-window"> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></a></li>
<div id="login-box" class="login-popup">
<a href="" class="close"><img src="fotos/x.png" style="width:30px; height:30px" class="btn_close" title="Cerrar Ventana" /></a>
\t \t \t \t \t \t \t <form action="action.php?accion=login" method="post" class="form" id="signin">
\t \t \t \t \t \t \t \t
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="[email protected]" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p><a href="">Has olvidado la contraseña?</a></p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p style="margin:2% 0 0 25%">No eres miembro?<a href=""> Registrate Ahora </a><span class="fa fa-arrow-right"></span></p>
</div>
</li>
</ul>
\t \t \t </div>
</nav>
\t </header>
[...more code that isn't important..]
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scriptLogin.js"></script>
</body>
</html>
如果你设置'＃登录框{宽度：600像素;''来登录＃箱{最大宽度：600px' – lharby