http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

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

Опубликовано: 01.09.2018

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

Модальное окно (попап) на сайте без плагинов, своими руками. HTML + CSS + jQuery

Вы уже знаете, что такое popup - это так называемое всплывающее окно на сайте , которое выпадает сверху, или выезжает откуда-то сбоку. Как же разместить такое выпадающее окно на нашем сайте? Прежде чем рассмотреть этот вопрос, давайте разберемся, зачем нам эти popup, или всплывающие окна, на сайтах нужны?


Как сделать всплывающее окно для отправки формы

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

Если Ваш одностраничник — это подписная страница , то всплывающее окно на сайте дополнительно привлечет внимание к Вашей подписной форме . Посетитель посмотрит Вашу страницу, потянется к выходу, чтобы закрыть ее, а тут выпадает откуда-то сверху окошко с текстом, и Ваш посетитель невольно еще раз задумывается — а может, подписаться?

И в любом случае не стоит бояться, что всплывающее окно кого-то отпугнет. Человек приходит на сайт, как правило, один раз. Второй раз он может попасть на него, разве что, только случайно. И в любом случае Вы его потеряете, если он на сайте не совершит целевого действия.

Так что сейчас мы будем ставить всплывающее окно на сайт.

Для начала скачайте себе на компьютер папку с архивом всплывающего окна для сайта :

Затем распакуйте архив и проделайте следующие действия:

1. Положите папку splash_wind в папку с Вашим одностраничником.

2. Откройте файл readme.txt . Этот файл лежит в папке, которую Вы разархивировали.

Затем откройте index.html Вашего сайта и поместите туда код из файла readme.txt ,  сразу после тэгов <title>...</title> .

3. После этого в папке Вашего сайта откройте: splash_wind — s_dialog — modal.js , и в этом файле измените код. Нас интересует строчка 19.

modal_wnd_path = 'splash_wind/s_dialog/templates/blue/index.html';

В этой строке, если Вам не нравится синий цвет окна, можете выбрать другой: измените слово blue на другое: green, grey, pink, purple, red или teal .

Образцы окон этих цветов Вы можете посмотреть в:

splash_wind — s_dialog — templates

4. Кодировка этих окон — utf-8 . Если Вам нужна другая кодировка, меняете ее в index.html в папке templates .

5. Меняете текст нужного Вам окна, это можно проделывать в программе SharePoint Designer .

6. Подставляете в подписную форму окна данные Вашей рассылки. Для рассылок я использую SmartResponder , и поэтому покажу, как это делать, на примере этого сервиса. В Генераторе Форм сервиса SmartResponder Вы: — выбираете нужную рассылку и выделяете ее; — в коде формы берете фрагмент от самого начала до закрывающего тэга </script> и ставите его вместо соответствующего фрагмента в файле index.html Вашего окна;

 — берете тэги input , которые находятся после тэга form , и меняете такие же в файле index.htm l окна;

 — берете еще один тэг input , и меняете в index.html

В результате форма подписки окна будет подписывать посетителя на Вашу рассылку.

7. Размещаете Ваш одностраничник в Интернете с помощью FTP-доступа программы Dreamweaver или Total Commander .

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

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.

Это не займет много времени. Просто нажмите на ссылку ниже:

    Подписаться на блог: Дорога к Бизнесу за Компьютером

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

Карта
rss