issue with jquery popup responsive

Question

I have a login popup. I'm starting with jquery and I've looked quite manuals, and not just got the way to make my popup becomes responsive. Here I leave the code popup to see if you can lend a hand as I have one week looking, tasting and ... nothing :(

//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('');
    $('#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{
	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;
}




	
		
		
		
		
		
		
		...
	


	
        
            
				
			
					
			
                
                    
                
                
                     Registrate 
                     Identificate 
                        
                            
							
								
                                 
                                    
                                    
                                 
                                 
                                    
                                    
                                 
                                 
                                    Has olvidado la contraseña?
                                    
                                 
                            
                            No eres miembro? Registrate Ahora 
                        
                    
                
			
        
	
  
    [...more code that isn't important..]

Hari Om Srivastava · Accepted Answer

if you are using bootstrap , Bootstrap also give responsive pop , Look here

http://getbootstrap.com/javascript/

if you want our custom code for responsive pop , Look here , I have write simple code





Untitled Document











     Click me for Responsive POP 
     
      
           X
         
  
    Email address
    
  
  
    Password

issue with jquery popup responsive

Answers (2)

Related Questions