Четверг, 28.03.2024, 15:07
Скрипты для Ucoz
Карта сайта
Главная | Всплывающий блок - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
  • Страница 1 из 1
  • 1
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Всплывающий блок (Всплывающий блок)
Всплывающий блок
LordarchДата: Вторник, 05.06.2012, 17:37 | Сообщение # 1
Рядовой
Группа: Пользователи
Пол:
Награды: 1
Репутация: 2
Сообщений: 7
Установка:
1)Для начала создадим сам блок:

Code
<div id="kpro">   
  <div id="kpro_clos"><h6>CLOSED</h6></div>   
  Тут содержимое блока   
  </div>


2)Далее пишем стили для блока:

  
  
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;   
   }  


3)Стили для кнопок закрыть:

  
  
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;   
   }  

  
4)Стили при наведении на кнопку:

  
  
Code
#kpro_clos:hover{   
   cursor:pointer;   
   position:absolute;   
   top:-38px;   
   right:-10px;   
   width:40px;   
   height:24px;   
   }  

  
5)Стиль для надписи на кнопки:

  
 
Code
 #kpro_clos h6{   
   text-align:center;   
   padding-top:7px;   
   color:#fff;   
   font: 9px 'Comic Sans MS', 'Arial';   
   }  


6)Теперь сама ссылка для открытия блока:

 
Code
  
   <a class="ic" href="javascript://" onclick="$('#kpro').fadeIn(2000)">Нажми на меня</a>  


7)Скрипт закрытия блока(ставим после блока):

  
Code
  <script type="text/javascript">   
   $(function()   
   {   
   $('#kpro_clos').click(function()   
   {   
   $('#kpro').fadeOut(2000);   
   });   
   });   
   </script>  


Блок легко адаптируется под дизайн сайта.
Готово!
  
  
  
 
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Всплывающий блок (Всплывающий блок)
  • Страница 1 из 1
  • 1
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2024

Создать бесплатный сайт с uCoz