Question

我有一个登录弹出窗口。我从jquery开始，我看起来非常手册，而不仅仅是让我的弹出窗口变得响应。在这里，我留下代码弹出窗口，看看你是否可以伸手，因为我有一周的时间看，品尝和......没有:(

＆＃13;

//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;
});
});

＆＃13;

/*LOGIN*/
@media only screen and (max-width: 600px) {
 .login-popup{
     width:100%;
  }
}

#login-box{
	width:600px;
	height:auto;
}

.login-popup{
	display:none;
	background:#2c3338;
	padding:10px;
	border:2px solid #000;
	float:left;
	font-size:1.2em;
	position:fixed;
	top:40%;
	left:50%;
	z-index:99999;
	color:#606468;
	font-family:'Calibri';
	line-height:1.5em;
}

#signin{
	width:auto;
	height:auto;
	margin:3% 0 0 25%;
}

#fondoLogin{
	background-color:#2c3338;
	color:#606468;
	font-family:'Calibri';
	font-size:14px;
	line-height:1.5em;
}

#signin span{
	background-color:#363b41;
	border-radius:3px 0px 0px 3px;
	-moz-border-radius:3px 0px 0px 3px;
	-webkit-border-radius:3px 0px 0px 3px;
	color:#606468;
	display:block;
	float:left;
	height:50px;
	line-height:50px;
	text-align:center;
	width:50px;
}

#signin input{
	height:50px;
}

#signin input{
	background-color:#3b4148;
	border-radius:0px 3px 3px 0px;
	-moz-border-radius:0px 3px 3px 0px;
	-webkit-border-radius:0px 3px 3px 0px;
	color:#606468;
	margin:0 0 2% 5%;
	padding:0 16px;
	width:198px;
}

#signin input:focus{
	border:2px solid #785da1;
	outline:none;
    box-shadow:0 0 10px #785da1;
}

#signin input[type="submit"]{
	width:280px;
	height:55px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background-color:#624291;
	color:#eee;
	font-weight:bold;
	margin:2% 0 2% 2%;
}

#signin input[type="submit"]:hover{
	background-color:#7842A6;
}

#signin a{
	color:#eee;
	text-decoration:none;
}

#signin a:hover{
	text-decoration:underline;
}

#signin p{
	width:300px;
	height:auto;
}

#signin input{
	border:none;
	font-family:'Calibri';
	font-size:14px;
	line-height:1.5em;
	padding:0;
	-webkit-appearance:none;
}

＆＃13;

<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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
		<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
		<title>...</title>
	</head>
<body>
<div>
	<header>
        <nav role="navigation" class="noround navbar-inverse">
            <div class="navbar-header">
				<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
					<span class="sr-only"> Barra de navegación</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
					
			<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>
							<form action="action.php?accion=login" method="post" class="form" id="signin">
								
                                 <div class="form-group">
                                    <p style="margin-left:4%"><span class="fa fa-user"></span>
                                    <input type="text" placeholder="ejemplo@ejemplo.com" 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>
			</div>
        </nav>
	</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>

＆＃13;

Answer 1

@media only screen and (max-width: 600px) {
 .login-popup{
     width:100%;
     left: 0;
  }
}

and put it bottom of css file

Answer 2

如果你使用bootstrap，Bootstrap也会提供响应式弹出，请看这里

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.pop_div{ display:none;}
.overrelay{ display:none;}
.pop_div {
    position: relative;
    margin: 0 auto;
    width: 38%;
    padding: 20px;
    background: rgba(247, 247, 95, 0.42);
    border: 1px solid #ccc;
    z-index: 12;

}
.close_pop {
    float: right;
    background: #f00;
    padding: 7px;
    border: hidden;
    height: 20px;
    width: 20px;
    line-height: 9px;
    border-radius: 10px;
    text-align: center;
    color: #fff;
}
.overrelay {
    position: absolute;
    top: 0px;
    background: rgba(255, 0, 0, 0.25);
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10;
}
</style>
</head>

<body>
     <div class="responsive_pop">Click me for Responsive POP </div>
     <!---------/// POP HERE ------->
      <div class="pop_div">
           <div class="close_pop">X</div>
         <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

      </div>
      <div class="overrelay"></div>
     <!--------/// POP HERE --------->

</body>
  <script>
     $('.responsive_pop').click(function(){

           $('.pop_div').show(500);
           $('.overrelay').show(500);



         });

         $('.close_pop').click(function(){

              $('.pop_div').hide(500);
           $('.overrelay').hide(500);

             });
  </script>
</html>

如果你想要我们的自定义代码来响应pop，请看这里，我已经编写了简单的代码

<?xml version="1.0"?>


<configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" strict="false" explicit="true" targetFramework="4.5.2" />
    <httpRuntime targetFramework="4.5.2"/>
  </system.web>
  <system.serviceModel>

    <bindings>
      <wsHttpBinding>
        <binding name="SSL">
          <security mode="TransportWithMessageCredential">
            <message clientCredentialType="UserName"/>
          </security>
        </binding>
      </wsHttpBinding>
    </bindings>

    <services>
      <service behaviorConfiguration="CustomValidation" name="WCFService.Service1">
        <endpoint address="" binding="wsHttpBinding" contract="WCFService.IService1" bindingConfiguration="SSL"/>
        <endpoint address="mex" binding="mexHttpsBinding" contract="IMetadataExchange"/>
      </service>
    </services>

    <behaviors>
      <serviceBehaviors>
        <behavior name="CustomValidation">
          <serviceMetadata httpsGetEnabled="true" />
          <serviceDebug httpsHelpPageEnabled="true" includeExceptionDetailInFaults="true" />
          <serviceCredentials>
            <userNameAuthentication userNamePasswordValidationMode="Custom" customUserNamePasswordValidatorType="WCFService.Verification, WCFService" />
          </serviceCredentials>
        </behavior>
      </serviceBehaviors>
    </behaviors>  

    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="false" />
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      -->
    <directoryBrowse enabled="false"/>
  </system.webServer>

</configuration>

jquery popup响应问题

2 个答案: