Всплывающее окно-баннер.


Всплывающее окно баннер убрать


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



Применение всплывающего окна.


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


Установка кода скрипта всплывающего окна.


Установка скрипта для вызова модального окна несложна и делится на два этапа.Первый-это непосредственно сам код скрипта вызова,который необходимо установить или в шаблон блога или же в любой гаджет нтмл,
<script type="text/javascript">var delay_popup = 10000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
а также CSS-настройки блока.Код CSS устанавливается в соответствующий раздел для блогспот перед закрывающимся тегом бскин,для Вордпрес в папку стилей.
<style type="text/css">
#parent_popup{
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#popup{
    background: #fff; /* фон окна */
    width: 240px; /* размер окна */
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border: 5px solid #ddd;
    position: relative;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
     border-radius: 15px;
}
.close{
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
}
.close:hover{
    background-color: rgba(0, 122, 200, 0.8);
}
</style>


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

<div id="parent_popup">
<div id="popup">
Место для текста,картинок,баннеров,видео и всего,что душа пожелает
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div>
Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода


Настройки показа блока всплывающего окна.


Код CSS необходим для того чтобы была возможность регулировать временной интервал появления нашего блока и стилистическое оформление самого блока окна.Все необходимые настройки за комментированы и внесены в код CSS. Число 10000 в коде скрипта является переменой величиной и соответствует 10 секундам.Для увеличения или уменьшения времени начала показа необходимо соответственно поменять значение.

Специально для тех кому сложно разобраться как что и куда установить,попробовать хочется, весь код скрипта с настройками целиком.Просто скопируйте весь код, добавив в обозначенное место свой текст или баннер, и установите в гаджет НТМЛ или просто на страницу.В результате несложных манипуляций на странице должно будет появиться такое симпатичное всплывающее модальное окно.

<!-- v-gol.ru block start--><script type="text/javascript">var delay_popup = 10000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
<style type="text/css">
#parent_popup{
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#popup{
    background: #fff; /* фон окна */
    width: 240px; /* размер окна */
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border: 5px solid #ddd;
    position: relative;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
     border-radius: 15px;
}
.close{
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
}
.close:hover{
    background-color: rgba(0, 122, 200, 0.8);
}
</style>
<div id="parent_popup">
<div id="popup">

Место для баннера,видео,фото

<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div><!-- v-gol.ru  block end -->

Оформление блоков для текста,цитат,кода.
Оформление тегов h1 h2 h3
Всплывающий баннер поверх страницы.
Pop-up или модальное окно 18+
Контекстная реклама для всех.Цена клика от пяти рублей.



Отправить комментарий