/ Сайтостроение / Scripts & jquery / Модальное окно на jquery

Модальное окно на jquery

HIT

14.10.2015

1492

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь.

Принцип модального окна

Вставляем в HEADER (выше всего контента), #backfon — это фон модального окна

<div id="backfon"></div>
<div class="popup">Все что угодно, например всплывающее окно</div>

Скрипт, можно вставлять любой эффект анимации из библиотеки animated

$(document).ready(function() {

//Появление всплывающего окна

$('.call-item').click(function() {

$('.popup').show();
$('.popup').removeClass('animated fadeOutDown');
$('.popup').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');

});
$('#backfon').click(function() {

$('#backfon').addClass('fadeOut');
$('.popup').addClass('fadeOutDown');
setTimeout(function () { $('#sea').hide(); $('#backfon').hide(); }, 700);

});

});

CSS

/* Всплывающее окно */
.popup {
background-color: #fff;
display: none;
width: 20%;
margin: 0 40%;
padding: 10%;
opacity: 0;
position: fixed;
text-align: center;
top: 30%;
z-index: 999;
}

#backfon {
background-color: rgba(0, 0, 0, 0.5);
background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
display: none;
}

Скроллинг при наведении

Чтобы окно скроллилось при наведении, используем этот скрипт

$(document).ready(function() {

$( '.popup' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
    
    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 100;
    e.preventDefault();
});

});

Вообще нормальному скроллингу при наведении на область в принципе мешает скрипт плавной прокрутки.

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header. Вставляем в самый низ, перед wp_footer <p id="Go_Top"><a Читать далее »

Блок с горизонтальной прокруткой

Блок с горизонтальной прокруткой

Делаем секцию (блок) с горизонтальной прокруткой. Внутри предполагаются изображения, но может быть все что угодно. Данный блок можно использовать в лэндинге, либо таким образом вводить галерею изображений. jQuery mousewheel plugin Читать далее »

Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Модальное окно на jquery
Создаем анимацию Scroll Down
Рекомендации для васСоздаем анимацию Scroll DownOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.