Всплывающая форма для сайта

Всплывающая форма — это способ показать свое предложение каждому пользователю сайта. Важно сделать это ненавязчиво и дать человеку возможность отказаться и закрыть форму.

Вариантов создать такой блок множество, в этом уроке мы будет создавать всплывающий блок, прижатый к низу страницы. В него можно разместить любую информацию и различные формы подписки. Такая реализация позволяет не закрывать основной контент, что позволит пользователю не отвлекаться от прочтения материала. Также мы внедрим кнопку закрытия, чтобы минимизировать раздражение пользователя. Ведь уже давно известно, что все всплывающие окна раздражают.

demoСкачать

Всплывающая форма html разметка

<div style="display: block;" id="meerkat">
<div id="meerkat-content-adsense" class="meerkat">
Тут может быть все, что хочется показать пользователю сайта
<a class="close">Close</a>
</div>
</div>

Пока все очень просто, в нижнюю часть страницы мы добавляем блок, в котором будет выводится наше предложение. Вместо текста можно поставить любую форму подписки, рекламу и многое другое.

Всплывающая форма css

Теперь необходимо оформить наш блок. Для этого добавим стилей.

.meerkat {color: rgb(255, 255, 255);}

#meerkat-container {
position: relative;
}
#meerkat {
width: 100%;
display: none;
}
#meerkat-content {
width: 960px;
margin: 0 auto;
padding-top: 10px;
}

#meerkat-content h1{
color: #FFF;
font-size: 3.8em;
}
#meerkat-content p{
color: #FFF;
font-size: 1.2em;
}
#meerkat-content a.dont-show{
color: #FFF;
font-weight: bold;
}
#meerkat-content a.dont-show:hover {
color: #FFF;
text-decoration: none;
}
#meerkat-content-adsense {
width: 730px;
margin: 0 auto;
padding-top: 10px;
}
a.close {
position: absolute;
top: 7px;
right: 3px;
background: url(../images/close-btn.png) no-repeat 0 0;
display: block;
height: 26px;
width: 26px;
text-indent: -9000px;
cursor: pointer;
}
a.close-meerkat {
position: absolute;
top: 5px;
right: 3px;
background: #FFF;
border: 2px solid #FFF;
text-decoration: none;
padding: 0px 4px 1px 5px;
font-weight: bold;
font-size: 1.2em;
color: #71adb1;
}
a.close-meerkat:hover {
border: 2px solid #2e2a22;
color: #2e2a22;
}
a.enter-site {
display: block;
height: 154px;
width: 453px;
background: #FFF url(../images/entrypagebg.png) no-repeat left top;
text-indent: -9000px;
margin: -154px -226px 0 0;
position: absolute;
top: 50%;
right: 50%;
}
a.enter-site:hover {
background-position: left bottom;
}
a.close:hover {
background-position: 0 bottom;
}

Важно. В оформлении используется две картинки, их необходимо загрузить в свою папку images и проверить пути, чтобы они были верно прописаны (background: #FFF url(.../images/entrypagebg.png) no-repeat left top; и подобное).

Всплывающая форма js

Далее приведен код отвечающий за появление нашего блока, без него он не сможет работать. Лучше сохранить его в отдельный файл и только потом подключать. Далее будет рассмотрен именно такой способ подключения скрипта.

function meerkat(options) {

this.settings = {
showMeerkatOnLoad: 'false',
close: 'none',
dontShow: 'none',
dontShowExpire: 0,
removeCookie: 'none',
meerkatPosition: 'bottom',
animation: 'slide',
animationSpeed: 'slow',
height: 'auto',
background: 'none'
}

if(options){
jQuery.extend(this.settings, options);
}

var settings = this.settings;
var cookieExpiration = settings.dontShowExpire;

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

jQuery(settings.removeCookie).click(function(){ eraseCookie('meerkat')});

if(readCookie('meerkat') != 'dontshow')
{
jQuery('html, body').css({'margin':'0', 'padding':'0', 'height':'100%'});
jQuery('#meerkat').show().wrap('<div id="meerkat-wrap"><div id="meerkat-container">' + '</div></div>');

jQuery('#meerkat-wrap').css({'position':'fixed', 'width':'100%', 'height': settings.height}).css(settings.meerkatPosition,"0");
jQuery('#meerkat-container').css({'background': settings.background, 'height': settings.height});
//Give the close and dontShow elements a cursor (there's no need to use a href)
jQuery(settings.close+","+settings.dontShow).css({"cursor":"pointer"});

if(jQuery.browser.msie && jQuery.browser.version <= 6){
jQuery('html, body').css({'height':'100%', 'width':'100%', 'overflow':'hidden'});
jQuery('#meerkat-wrap').css({'position':'absolute', 'bottom':'-1px'});

jQuery("body").children()
.filter(function (index) {
return jQuery(this).attr("id") != "meerkat-wrap";
})
.wrapAll('<div id="ie6-content-container">', '</div>');
jQuery('#ie6-content-container').css({'position':'relative', 'overflow':'auto', 'width':'100%', 'height':'100%'});
//Check if ie6-content-container has a scrollbar present. If it does we need to move the meerkat container over 17px
var element = document.getElementById('ie6-content-container');
if ((element.clientHeight < element.scrollHeight)&&(settings.height != 100+'%')) {
jQuery('#meerkat-container').css({'margin-right':'17px'});
}
var bodyStyle = document.body.currentStyle;
var bodyBgStyles = bodyStyle.backgroundColor +" "+ bodyStyle.backgroundImage +" "+ bodyStyle.backgroundRepeat +" "+ bodyStyle.backgroundAttachment +" "+ bodyStyle.backgroundPositionX +" "+ bodyStyle.backgroundPositionY;
jQuery('body').css({'background-image' : 'none'});
jQuery('#ie6-content-container').css({'background' : bodyBgStyles});
}

if((settings.animation == "slide")&&(settings.showMeerkatOnLoad != "true")){
jQuery('#meerkat-wrap').hide().slideDown(settings.animationSpeed);
jQuery(settings.close).click(function(){
jQuery("#meerkat-wrap").slideUp();
});

jQuery(settings.dontShow).click(function () {
createCookie('meerkat','dontshow', cookieExpiration);
jQuery("#meerkat-wrap").slideUp();
});
} else if((settings.animation == "fade")&&(settings.showMeerkatOnLoad != "true")) {
jQuery('#meerkat-wrap').hide().fadeIn(settings.animationSpeed);
jQuery(settings.close).click(function(){
jQuery("#meerkat-wrap").fadeOut(settings.animationSpeed);
});

jQuery(settings.dontShow).click(function () {
createCookie('meerkat','dontshow', cookieExpiration);
jQuery("#meerkat-wrap").fadeOut();
});
} else if ((settings.showMeerkatOnLoad == "true")&&(settings.animation == "slide")){
jQuery('#meerkat-wrap').show();
jQuery(settings.close).click(function(){
jQuery("#meerkat-wrap").slideUp();
});

jQuery(settings.dontShow).click(function () {
createCookie('meerkat','dontshow', cookieExpiration);
jQuery("#meerkat-wrap").slideUp();
});
} else if ((settings.showMeerkatOnLoad == "true")&&(settings.animation == "fade")){
jQuery('#meerkat-wrap').show();
jQuery(settings.close).click(function(){
jQuery("#meerkat-wrap").fadeOut(settings.animationSpeed);
});

jQuery(settings.dontShow).click(function () {
createCookie('meerkat','dontshow', cookieExpiration);
jQuery("#meerkat-wrap").fadeOut();
});
}
} else {
jQuery("#meerkat").hide();
}

Всплывающая форма подключение скриптов.

Не смотря на то, что в уроке были подробно описаны все стили и скрипты их стоит сохранять в отдельные файлы и только после этого подключать к основному сайту.

Код для подключения

<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery.meerkat.1.0.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

  • Первая строка — это подключение стилей блока
  • Вторая строка — это подключение скрипта
  • Третья строка — это подключение библиотеки js. Если она уже подключена к вашему сайту, добавлять ее не нужно.

После этого всплывающий блок начнет полноценно работать.
Если у вас остались вопросы, всегда можно скачать исходники и более детально изучить структуру всплывающего блока.

Поделиться в социальных сетях: