popup for freelance
by AJIEKCEU
HTML
<div id="bg"></div>
<div id="popup">
<a class="close" href="#"></a>
<div class="lightbox-grey-panel">
<p class="heading">Видеокурс miniMBA: Продажи</p>
<div class="lightbox-product-image">
<img src="http://mba4free.ru/wp-content/uploads/2011/06/mba1.jpg" alt=""/> </div>
<div class="lightbox-contentxx">
<div class="bullet-listx">
<ul class="bullet-list"> <li>С чего начинать работу над увеличением продаж</li>
<li>Как продавать больше тем, кто уже покупает</li>
<li>Как стимулировать клиентов покупать у Вас снова и снова</li> </ul>
</div>
</div>
<div class="lightbox-clear"></div>
</div>
<div class="lightbox-signup-panel">
<p class="heading2"></p>
<p class="lightbox-signup-panel_p">Получить Видеокурс miniMBA: Продажи бесплатно!</p>
<form method="post" action="http://shop.finance1.ru/s/kurs.php">
<div>
<input type="hidden" name="rassid[0]" value="mba4free"><input type="hidden" name="doneurl" value="http://mba4free.ru/sales/"><input type="hidden" name="noactivation" value="1"><input type="hidden" name="validate" value="1"><input type="hidden" name="subscribe" value=""><input type="text" class="name" value="Ваше Имя" name="uname"><input type="text" class="email" value="Ваш E-Mail" name="email"> <input type="submit" value="Получить КУРС!" src="http://ultrasales.ru/wp-content/plugins/popup-domination/themes/lightbox8/images/trans.png" class="red-button">
<p class="secure">После регистрации вы получите доступ к видео-материалам</p>
</div>
</form>
</div>
</div>
CSS
/* form popups*/
#bg {
background: #000;
opacity: .7;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
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{
position: fixed;
z-index: 1001;
top: -300px;
left: 35%;
margin: 0 0 0 -210px;
height: 460px;
background-repeat: no-repeat;
background-position: left top;
background-image: url('http://ultrasales.ru/wp-content/plugins/popup-domination/themes/lightbox8/images/lightbox8.png');
width: 922px;
}
.close{
overflow: hidden;
position: absolute;
z-index: 33;
right: 10px;
top: 10px;
background-image: url('http://ultrasales.ru/wp-content/plugins/popup-domination/themes/lightbox8/images/lightbox-close.png');
background-repeat: no-repeat;
background-position: left top;
height: 25px;
width: 25px;
}
.close:hover{
background-position: left bottom;
}
.lightbox-grey-panel{
width: 550px;
padding: 30px 40px;
padding-right: 0px;
padding-top: 20px;
height: 425px;
float: left;
}
.heading{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 36px;
line-height: 41px;
font-weight: bold;
font-style: italic;
margin-top: 30px;
margin-bottom: 30px;
color: #0059de;
text-shadow: 0px 1px 0px #fff;
text-align: left;
letter-spacing: -1px;
padding-left: 20px;
}
.lightbox-product-image{
float: left;
margin-right: 5px;
width: 230px;
}
.lightbox-contentxx{
float: right;
width: 305px;
}
.bullet-list{
list-style: none;
max-width: 400px;
}
.bullet-list li{
font-size: 18px;
font-weight: normal;
font-family: Georgia, Times, serif;
background-image: url('http://ultrasales.ru/wp-content/plugins/popup-domination/themes/lightbox8/images/bullet.png');
background-position: 0px 0px;
color: #000;
text-shadow: 0px 1px 1px #fff;
background-repeat: no-repeat;
padding-left: 35px;
margin-bottom: 5px;
line-height:...
JavaScript
function popup() {
$('#bg').fadeIn(function(){
$('#popup').animate({'top':100});
});
$('.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();