Спливаюче модальне вікно з текстом і формою підписки

Інформація, представлена ​​на цій сторінці орієнтована в першу чергу для початківців web-майстрів.

Так буде виглядати вікно на тлі затіненій сторінки; його зовнішній вигляд в подальшому можна буде видозмінювати за допомогою CSS:


Спливаюче модальне вікно з текстом і формою підписки

Процес установки на сайт

Для здійснення цієї ідеї необхідно виконати всього три простих, відомих, стандартних кроку:

  • Завантажити файли стилів, зображень і ява-скриптів в відповідні папки в корені сайту;
  • Підключити стилі і ява-скрипти, прописавши шляху до цих файлів в розділі head;
  • Вставити код спливаючого модального вікна в розділ body сторінки, бажано, перед закриває тегом: .

Завантажити архів (431 кб) з папкою modalwindow. розпакувати в окрему папку на комп'ютері.

В папці modalwindow знаходяться дві папки - css і js. Файли з цих папок закачати в однойменні папки, які знаходяться в корені вашого сайту: файли з папки css (все, включаючи папку з зображеннями!) - в папку css в корені сайту, файли з папки js в папку js в корені сайту. Якщо таких папок немає в корені вашого сайту, значить їх потрібно створити.

Далі необхідно підключити стилі і ява-скрипти. Для цього, код (без змін!) Потрібно скопіювати і вставити в вашу html-сторінку, бажано в розділі head. де це все і повинно розташовуватися:

Нижче представлений код самого модального вікна, який можна вставляти в самий низ сторінки, перед закриває тегом body:

крок фінальний

Після виконання цих трьох простих кроків, Ви отримаєте всього-лише красиве, але не функціональний модальне вікно з формою підписки. Тому, форму модального вікна потрібно зв'язати з сервісом розсилок. В цей код потрібно вносити доповнення і зміни, взяті з форми обраного вами сервісу розсилок, щоб прив'язати до цього сервісу.





І це все, що від Вас потрібно! Модальне вікно буде дивовижно працювати і збільшувати базу передплатників на повному автоматі! Щастя вам! L.M.

Схожі статті