Домой / Сайтостроение / Всплывающие окна на сайте — Подробное описание!

Всплывающие окна на сайте — Подробное описание!

Всплывающие окна на сайте
Всплывающие окна на сайте

Всплывающие окна на сайте при попытке уйти со страницы с формой подписки и проигрыванием видео. На ваш выбор!

Здравствуйте, уважаемые друзья и гости блога!


Как я и предполагал, прошлый мой материал «Модальное окно jquery» вызвал множество вопросов среди моих посетителей блога. Вопросы в основном однотипные и заключаются в том, что мало подробной информации по установке и настройке модального окна о котором я вам писал.

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

Ну, что давайте начнем ...

Делаем всплывающие окна на сайте с формой подписки и проигрыванием видео — Самостоятельно!

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

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

Теперь разбираемся с модальными окнами во всех подробностях ...

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

В своем прошлом материале я вам уже показывал пример подобного модального окна, вот оно. Если оно не появляется у Вас, то пожалуйста очистите куки в своем браузере или просто войдите по данной ссылке в другом браузере и Вы увидите его!

Как очистить куки в вашем браузере? Все просто — рассказываю кратко и быстро на примере браузера Google Chrome:

В верхнем правом углу Google Chrome откройте вкладку «Настройки и управление Google Chrome». Затем в открывшемся окне выберите «Настройки» и далее на открывшейся странице найдите сроку-ссылку «Показать дополнительные настройки» — жмите на нее. В открывшемся окошке ниже найдите «Очистить историю» и нажмите, а там Вы уже можете выбрать за какой период времени вам нужно очистить историю или по другому — куки! Очистите ее и Вы снова сможете увидеть всплывающие окна на сайте о которых я вам сейчас продолжу рассказывать!

Разобрались, как очистить куки в своем браузере? Ну и хорошо! Продолжаем ...

Как и куда вставить код на всплывающие окна на сайте?

Вот весь код всплывающего окна, который был приведен мной в примере прошлой статьи. Смотрим, копируем и вставляем на свой сайт:

<!DOCTYPE HTML>
<html lang="ru">
<head>

<title>Модальное окно jquery</title>

<meta charset="utf-8" />
<meta name="description" content="Модальное окно jquery - Не упусти посетителя с сайта!" />
<meta name="keywords" content="модальное окно jquery, модальное окно, jquery" />
<meta name="document-state" content="Dynamic" />

<!-- С вопросами обращаться сюда: -->
<meta name="designer" content="pribylwm.ru / Блог Валерия Бородина" />
<meta name="copyright" lang="ru" content="Блог Валерия Бородина" />

<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- /CSS -->

<!-- Modal -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/appruv.js"></script>
<!-- / Modal -->

</head>
<body>

<!-- Modal -->
<div id="Modal">
    <div class="Modal_main">
        <div id="close">
    		<a href="#" class="modalCloseImg simplemodal-close"><div id="rbm-close" title="Закрыть"></div></a>
    </div>
        <div class="box1">
            <img class="korobka" src="images/korobka.png" title="Модальное окно jquery">
            <img class="arrows" src="images/arrows.png">
        </div>
        <div class="box2">
            <div id="Modal_form">
                <div class="call1"><strong>«Модальное окно jquery»</strong><br/> Делай свое модальное окно jquery для сайта!</div>
                <div class="call2">Все прямо сейчас! Введите Ваше Имя и Ваш E-mail:</div>

                <!-- ВСТАВЬТЕ СЮДА СКРИПТ Формы подписки -->
                <form method="post" action="https://rumailer.ru/add_subscriber_from_form">
                    <!-- ВСТАВЬТЕ СЮДА ПЯТЬ ИНПУТОВ -->
                    <div>
            <input class="field_object" style="font-family: Arial; border-width: 1px; border-color: rgb(218, 218, 218); background: url(https://rumailer.ru/content/img/imp_form.png) 98% 12px no-repeat rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 0px; font-size: 14px; border-style: solid; width: 85%; padding: 3px; height: 28px;" type="text" name="email" placeholder="Введите email" required="required">
            <input class="field_object" type="text" name="firstname" style="border-width: 1px; border-color: rgb(218, 218, 218); font-family: Arial; border-style: solid; width: 85%; padding: 3px; height: 28px;" placeholder="Имя"></div><div class="" field_id="8" field_type="button" is_important="1" style="padding: 10px 5px; position: relative; text-align: center;">
            <input class="field_object" style="font-family: Arial; border-radius: 2px; border-color: rgb(184, 17, 33); border-width: 2px; font-weight: normal; background: rgb(255, 0, 0); color: rgb(255, 255, 255); font-size: 14px; border-style: solid; width: 85%; padding: 3px; height: 40px; cursor: pointer;" name="" type="submit" value="Скачать ">
                                                  </div>
            <input type="hidden" name="opt_in_id" value="2de5e0f1ae73f15c0db36b14603dfdfe" /><script async type="text/javascript" src="https://rumailer.ru/content/javascript/rm_scripts.js"></script></form>
          </div>
                </form>
                <!-- / Ваша | Форма подписки -->

                <div class="confident"> Ваш E-Mail в безопасности</div>
            </div>
        </div>
    </div>
  <div style="text-shadow:none;color:#aaa;font-size:0.8em;position:absolute; width:740px;text-align:center;bottom:-35px;">сделано при помощи <a href="https://pribylwm.ru/samoobrazovanie/modalnoe-okno-jquery.html" target="_blank" style="color:#ccc;">Модальное окно jquery</a></div>
</div>
<!-- / Modal -->

<!-- Main -->
<div id="main">
  <div><img id="brain" src="images/brain.png"></div>
  <div id="info">
    <div><img class="info" src="images/info.png"></div>
    <center>
      <p>Модальное окно jquery для вашего сайта.</p>
      <p>Чтобы оно работало при повторном открытии - очистите куки вашего браузера!</p>
      <p>Или просто откройте его в другом браузере!</p>
    </center>
  </div>
</div> <!-- / Main -->
</body>
</html>

Теперь давайте разберемся какие части данного кода куда вставляются?
Если Вы делаете отдельную страницу на вашем сайте, тогда просто создайте папку в корне сайта и закачайте туда все файлы, которые можно скачать вот здесь: Скачать модальное окно с формой подписки

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

Теперь вам нужно его отредактировать под себя. Как это сделать? Очень просто!

В папке images содержатся картинки, которые Вы можете или исправить в фотошопе или вообще сделать новые, только названия не меняйте! Затем откройте файл index.html. В нем вам нужно исправить все, что написано по-русски под свои нужды, а также замените ссылки на свои. делайте это в текстовом редакторе Notepad++, о котором Вы можете узнать больше вот тут.

Теперь еще один нюанс! Обязательно измените форму подписки, которая выглядит вот так:

Тут все просто, хотя кажется иначе!

Если Вы пользуетесь современным сервисом Е-майл рассылок "RUMILER", тогда еще легче! К стати об этом сервисе я уже писал и Вы можете все прочитать на этой странице.

Просто возьмите вот этот код:

<!-- ВСТАВЬТЕ СЮДА СКРИПТ Формы подписки -->
                <form method="post" action="https://rumailer.ru/add_subscriber_from_form">
                    <!-- ВСТАВЬТЕ СЮДА ПЯТЬ ИНПУТОВ -->
                    <div>
            <input class="field_object" style="font-family: Arial; border-width: 1px; border-color: rgb(218, 218, 218); background: url(https://rumailer.ru/content/img/imp_form.png) 98% 12px no-repeat rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 0px; font-size: 14px; border-style: solid; width: 85%; padding: 3px; height: 28px;" type="text" name="email" placeholder="Введите email" required="required">
            <input class="field_object" type="text" name="firstname" style="border-width: 1px; border-color: rgb(218, 218, 218); font-family: Arial; border-style: solid; width: 85%; padding: 3px; height: 28px;" placeholder="Имя"></div><div class="" field_id="8" field_type="button" is_important="1" style="padding: 10px 5px; position: relative; text-align: center;">
            <input class="field_object" style="font-family: Arial; border-radius: 2px; border-color: rgb(184, 17, 33); border-width: 2px; font-weight: normal; background: rgb(255, 0, 0); color: rgb(255, 255, 255); font-size: 14px; border-style: solid; width: 85%; padding: 3px; height: 40px; cursor: pointer;" name="" type="submit" value="Скачать ">
                                                  </div>
            <input type="hidden" name="opt_in_id" value="2de5e0f1ae73f15c0db36b14603dfdfe" /><script async type="text/javascript" src="https://rumailer.ru/content/javascript/rm_scripts.js"></script></form>
          </div>
                </form>
                <!-- / Ваша | Форма подписки -->

И замените мои куски кода на свои из вашей формы подписки с сервиса RUMAILER или из другого, которым Вы пользуетесь.

Теперь ваша страница с модальным окном и формой подписки готово!

Делаем всплывающие окна на сайте с выводом и автопроигрыванием видео!

Также ничего сложного!

Вот пример моего модального окна, которое проигрывает видео во всплывающем окне: ПРИМЕР

Вот ссылка на файлы: Скачать модальное окно с видео

Которые Вы аналогичным образом должны исправить под свой сайт и вставить ссылку на свое видео. Далее залейте все исправленные файлы к себе на хостинг в нужную папку и наслаждайтесь новым модальным окном с видео!

Если будут трудности? Пишите в комментариях!

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу