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

Здравствуйте, уважаемые друзья и гости блога! Как я и предполагал, прошлый мой материал “Модальное окно 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 или из другого, которым Вы пользуетесь.

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

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

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

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

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

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

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

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