Создаем модальное (всплывающее) окно основанное на технологии 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");
}
});Изменяющийся заголовок всплывающего окна
Если форма одна и та же по составу полей, но появляется она во всплывающем окне при нажатии разных кнопок, можно сделать у формы заменяющиеся заголовки.
Верстка кнопки:
<a class="btn order" text="Запрос консультации по инвестированию">Консультация по инвестированию</a>Скрипт, при вызове окна, нужно дополнить следующим:
var name = $(this).attr('text');
$('#order h2').text(name);
