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

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

HIT

14.10.2015

1832

Создаем модальное (всплывающее) окно основанное на технологии 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(/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();
});

});

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

Появление всплывающего окна при уходе с сайта

Нашел любопытный эффект при пропадании курсора из области экрана сайта вызывается всплывающее окно:

$(document).mouseleave(function(e) {
    if (e.clientY < 0) {
        // Вызов всплывающего окна
        $(".exitblock").fadeIn("fast");
    }
});

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Блок с горизонтальной прокруткой

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

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

Плавный скроллинг по якорям

Плавный скроллинг по якорям

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script Скорость перехода может регулироваться. В предложенном Читать далее »

Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( 'scrollme', get_template_directory_uri() Читать далее »

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

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

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