Описание
Решил поделиться с вами одним простым но интересным скриптом.
Суть скрипта в том, что при нажатиии на ссылку или кнопку (это зависит от вашего желания)
плавно появляется блок по центру экрана с контентом который вы туда поставите.
Итак начнём:
Для начала создадим сам блок:
Code
<div id="kpro">
<div id="kpro_clos"><h6>CLOSED</h6></div>
Тут содержимое блока
</div>
Далее пишим стили для блока:
Code
#kpro{
position:absolute;
width:800px; // Ширина блока
height:320px; // Высота блока
top:50%; // Это не меняем
left:50%; // Это не меняем
margin-left:-410px; // Половина ширины блока
margin-top:-160px; // Половина высоты блока
background-color:rgba(0, 0, 0, 0.7); // Фон блока и его прозрачность
border-right:10px solid #fff ; // Бордюр справа
border-left:10px solid #fff; // Бордюр слева
border-top:10px solid #fff; // Бордюр сверху
border-bottom:10px solid #fff; // Бордюр снизу
border-radius:20px 0 20px 20px; // радиус скругления углов
display:none;
}
Стили для кнопки закрыть:
Code
#kpro_clos{
position:absolute;
top:-34px;
right:-10px;
width:40px;
height:20px;
background-color:rgba(0 ,0, 0, 0.7);
border-right:4px solid #fff;
border-left:4px solid #fff;
border-top:4px solid #fff;
border-radius:20px 20px 0 0;
}
Стили при наведении на кнопку:
Code
#kpro_clos:hover{
cursor:pointer;
position:absolute;
top:-38px;
right:-10px;
width:40px;
height:24px;
}
Столь для надписи на кнопке:
Code
#kpro_clos h6{
text-align:center;
padding-top:7px;
color:#fff;
font: 9px 'Comic Sans MS', 'Arial';
}
Теперь сама ссылка для открытия блока:
Code
<a class="ic" href="javascript://" onclick="$('#kpro').fadeIn(2000)">Нажми на меня</a>
Скрипт закрытия блока(ставим после блока)
Code
<script type="text/javascript">
$(function()
{
$('#kpro_clos').click(function()
{
$('#kpro').fadeOut(2000);
});
});
</script>
Блок легко адаптируется под стиль сайта.
Ну вот и всё!
