Hello, I am trying to create a responsive login popup using jQuery but have been struggling for a week. Below is the code snippet that I have been working on. Any help or guidance would be greatly appreciated.
//scriptLogin.js archive
$(document).ready(function() {
$('a.login-window').click(function() {
//Get values of variables from the link
var loginBox = $(this).attr('href');
//Create the popup
$(loginBox).fadeIn(300);
//Set padding + border (css)
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add mask layer to body (to darken background when popup opens)
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
//Close the popup when X icon is clicked
$('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;
}
[...more CSS and HTML code here...]
</head>
<body>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
[...more HTML code here...]
</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>