UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Компания Google зарабатывает примерно $700 каждую секунду. © Google

»

Введите код полученный после подписки

  • 3

  • 0

Всплывающее окно с помощью JQuery

Автор - Жур Артур | Добавлено - 2014-01-18 | Просмотров - 5389 | Скачено - 66

В этом уроке мы с вами реализуем всплывающее окно с помощью библиотеки JQuery. Данное всплывающее окно очень хорошо подойдёт при добавлении товаров в корзину.

1Подключение плагина JQuery

Первым делом нужно подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> . Без этого плагина JQuery код работать не будет!

Подключение плагина


2JQuery код всплывающего окна

	$(document).ready(function(){
	   
 // Определяем нажатие на кнопку по которому будет появляться всплывающее окно.
$('#clickadd').click(function(){ 
      
      // Плавно показываем окно. Интервал - пол секунды.    
    $('.bottom-message').fadeIn(500,function(){
     
     // Определяем id таймера и устанавливаем его на 2,5 секунды.
     // По истечению 2,5 секунды будет происходить код: $('.bottom-message').fadeOut(500); , а именно будет плавно исчезать окно.   
    timeoutID = setTimeout("$('.bottom-message').fadeOut(500);",2500);    
        
    });
    
    // Отменяем таймер, чтобы при нескольких нажатий на кнопку не сбивался таймер.
    clearTimeout(timeoutID);
    
});

// Определяем наведение курсора на всплывающее окно.
$(".bottom-message").hover(
  function() {
   
   clearTimeout(timeoutID); // Если пользователь НАВЁЛ курсор на окно, то отменяем закрытие окна по таймеру.
             
  }, function() {
   
   timeoutID = setTimeout("$('.bottom-message').fadeOut(500);",2500); // Если пользователь ОТВЁЛ курсор от окна, то активируем таймер по новому. 
    
  }
 );
      
});

  • setTimeout - Выполняет указанное действие по истечению указанного времени. Интервал времени вы можете указать любой.
  • fadeIn - Плавное появление окна, в нашем случае интервал стоит 500, если укажите больше, то окно будет появляться медленней.
  • fadeOut - Плавное исчезание окна, в нашем случае интервал стоит 500, если укажите больше, то окно будет исчезать медленней.

3HTML код окна


Товар успешно добавлен в корзину.

Перейти к оформлению

4CSS стили для окна и надписей

.bottom-message{
   background-color: #7D8993;
   width: 250px;
   height: 60px;
   right: 10px;
   bottom: 10px;
   position: absolute;
   border-radius:5px ; 
  -webkit-border-radius:5px ; 
  -moz-border-radius:5px ;  
   display: none;
}
.bottom-message:hover{
    background-color: #6D7780;
}
.bottom-message p{
   margin-top: 10px;
   margin-bottom: 0;
   margin-left: 10px;
   color: white;
   font: 13px sans-serif;
}
.bottom-message a{
  font: 12px sans-serif;
  color: #62FFB6;
  display: inline-block;
  text-decoration: underline;
  margin-left: 10px;
  margin-top: 7px;
}

Интересное

Комментарии