popup for mit

by AJIEKCEU

HTML

<a href="#" class="send">Отправить</a>
<div id="bg"></div>
<div id="popup">
    <a class="close" href="#"></a>
    <span class="message">Спасибо, Ваше собщение отправленно!</span>
</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;
text-align:center;
font-size:14px;
font-weight:bold;
text-transform: uppercase;
line-height:14px;
color:#0c1829;
text-decoration:none;
padding:12px 0 12px;
display:block;
}
#popup{
   text-align:center;
    font-family:Arial; 
    background-color:#fff;
    padding:25px 20px 13px 20px;
   position: fixed;
    width:395px;
    height:95px;
    font-size:14px;
    font-weight:700;
    z-index: 1001;
    top: -300px;
    left: 50%;
    margin: 0 0 0 -210px;
}



.message{
   position: relative;
    top:35px;
}

.close{
overflow: hidden;
background:url(http://mitlab2.ru.web1.msmsoft.com/i/close.png);
position: absolute;
left: 187px;
top: -24px;
z-index: 33;
width: 57px;
height: 57px;
}

JavaScript

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