Главная › Новости

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

Опубликовано: 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: