Главная » Файлы » Скрипты для uCoz » Другие скрипты
Всплывающий блок
24.06.14, 09:48:59



Решил поделиться с вами одним простым но интересным скриптом.
Суть скрипта в том, что при нажатиии на ссылку или кнопку (это зависит от вашего желания)
плавно появляется блок по центру экрана с контентом который вы туда поставите.

Вот тут можно посмотреть демо

Итак начнём:

Для начала создадим сам блок:
Код
<div id="kpro">  
  <div id="kpro_clos"><h6>CLOSED</h6></div>  
  Тут содержимое блока  
  </div>


Далее пишим стили для блока:
Код
#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;  
  }


Стили для кнопки закрыть:
Код
#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;  
  }


Стили при наведении на кнопку:
Код
#kpro_clos:hover{  
  cursor:pointer;  
  position:absolute;  
  top:-38px;  
  right:-10px;  
  width:40px;  
  height:24px;  
  }


Столь для надписи на кнопке:
Код
#kpro_clos h6{  
  text-align:center;  
  padding-top:7px;  
  color:#fff;  
  font: 9px 'Comic Sans MS', 'Arial';  
  }


Теперь сама ссылка для открытия блока:
Код
<a class="ic" href="javascript://" onclick="$('#kpro').fadeIn(2000)">Нажми на меня</a>


Скрипт закрытия блока(ставим после блока)
Код
<script type="text/javascript">  
  $(function()  
  {  
  $('#kpro_clos').click(function()  
  {  
  $('#kpro').fadeOut(2000);  
  });  
  });  
  </script>


Блок легко адаптируется под стиль сайта.
Ну вот и всё!
Категория: Другие скрипты | Добавил: Apocalypse | Теги: блок, Всплывающий
Просмотров: 502 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: