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

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

HIT

14.10.2015

1976

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

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Scrollspy jquery

Scrollspy jquery

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий. Подключение скрипта Читать далее »

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

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

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

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

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

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом. Все это надо поместить в подвал: скрипт, инициализация скрипта. <script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script> <script> // Skroll-page $(document).ready(function() { //Chrome Читать далее »

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

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

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