popup for telefrast

by AJIEKCEU

HTML

<div class="auth"><a href="#" class="send">Отправить</a></div>
<div id="bg"></div>
<div id="popup">
    <form action="">
        <a class="close" href="#"></a>
        <h2>Вход:</h2>
        <p>Логин:</p>
        <input name="" type="text"/>
        <p>Пароль:</p>
        <input name="" type="text"/>
        <div class="checkbox1"><input type="checkbox" class="input_checkbox"/>
                <span class="checkbox_text_auth">Запомнить меня?</span>
        </div>
        <div class="popup_links">
            <a href="#">Забыли пароль</a> <span>|</span> <a href="#">Регистрация</a>
        </div>
        <input type="submit" value=""/>
    </form>
</div>

CSS

/* form popups*/
#bg {
background: #000;
opacity: .7;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 20;
}
.send{
width:135px;
font-size:14px;
font-weight:bold;
text-transform: uppercase;
line-height:14px;
color:#0c1829;
text-decoration:none;
padding:12px 0 12px;
display:block;
}
#popup{
font-family: Arial;
background-color: #fff;
padding: 25px 16px 13px 20px;
position: fixed;
width: 264px;
font-size: 14px;
font-weight: 700;
z-index: 1001;
top: -400px;
left: 50%;
margin: 0 0 0 -210px;
}
#popup h2{
color:#56b336;
font-size:13px;
    line-height:18px;
    font-weight:700;
    margin-bottom:20px;
}
#popup p{
color:#202020;
font-size:13px;
line-height:18px;
font-weight:700;
    margin-bottom:10px;
}
.close{
overflow: hidden;
background: url(http://telefrast.by.web1.msmsoft.com/i/close.png);
position: absolute;
right: 9px;
top: 8px;
z-index: 33;
width: 29px;
height: 29px;
}
#popup input[type="text"]{
border: 1px solid #d0d0d0;
border-radius: 3px;
box-shadow: 0 1px 2px #ddd inset;
    width:248px;
    height:39px;
    margin-bottom:19px;
    padding-left:15px;
}
#popup .checkbox1{
left: 15px;
top: 11px;
float: none;
width: 16px;
height: 17px;
padding: 0;
margin: 0;
background: url(http://telefrast.by.web1.msmsoft.com/i/check.png);
}
.checkbox1 {
display: inline-block;
width: 16px;
height: 17px;
background: url(http://telefrast.by.web1.msmsoft.com/i/check.png);
cursor: pointer;
}
#popup iput[type="checkbox"]{
left: 15px;
top: 11px;
float: none;
width: 16px;
padding: 0;
margin: 0;
background: url(http://telefrast.by.web1.msmsoft.com/i/check.png);
}
.input_checkbox{
 display: none;
}
.checkbox_text_auth {
padding-left: 25px;
position: absolute;
}
#popup .checked{
background-position: -16px 0;
}
.popup_links{
color:#489925;
font-size:13px;
line-height:18px;
    margin:10px 0;
}
.popup_links a{
color:#489925;
}
.popup_links a:hover{
text-decoration:none;
}
#popup input[type="submit"]{
background:...

JavaScript

function popup() {
    $('.auth a').click(function(){
		$('#bg').fadeIn(function(){
			$('#popup').animate({'top':100});
		});
		return false;
	});
	$('.close').click(function(){
		$('#popup').animate({'top':-400},function(){
			$('#bg').fadeOut();
		});
		return false;
	});
    $('#bg').click(function(){
		$('#popup').animate({'top':-400},function(){
			$('#bg').fadeOut();
		});
		return false;
	});
}
popup();

var checks=function() {
	$('.checkbox, .radio, .checkbox1').each(function(I){
		if($('input',this).attr('checked')) $(this).addClass('checked'); else $(this).removeClass('checked');
	});
}
$(function(){
	checks();
	var chf=0;
	$('.checkbox, .checkbox1').click(function(){
		if(chf==0) {
			chf=1;
			$(this).toggleClass('checked');
			if($(this).hasClass('checked')) $('input',this).attr('checked',true); else $('input',this).attr('checked',false);
			checks();
			setTimeout(function(){chf=0},10);
		}
	});
	$('.radio').click(function(){
		$(this).addClass('checked');
		$('input',this).attr('checked',true);
		checks();
	});
});