Як створити спливаюче (модальное) вікно в вающие вікна в ня модальних вікон за допомогою плагіна popup

У будь-якому випадку, головне завдання модальних (спливаючих вікон) - привернути увагу користувача.

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

Створення спливаючих вікон в WordPress

2. Після активації плагіна перейдіть в Pupup Maker -> Add New.

3. В сторінці ми будемо створювати модальне вікно. Давайте пройдемося по пунктах налаштувань:

• 6) Відзначаємо галочкою в тому випадку, якщо ми ходимо щоб після відкриття модального вікна ми бачили на тлі сайт. Рекомендую відзначати.
• 7) Налаштування швидкості і типу анімації. Якщо ви не аматори експериментувати з анімаціями, то можна залишати все за замовчуванням.
• 8) Налаштування позиціонування. За замовчуванням модальне вікно з'являтиметься вгорі по центру.
• 9) Ось тут вже цікавіше. У цьому полі можна вказати класи або ідентифікатори елементів вашого сайту, при кліці на які буде відкриватися створюване вами модальне вікно. Можливість дуже крута і корисна, але вимагає деяких знань в CSS.
• 10) Налаштування CSS властивості z-index. Зазвичай не потребує змін.

• 11) Налаштування закриття модального вікна. Click Overlay to Close - закриття модального вікна при натисканні повз нього. Press ESC to Close - закриття модального вікна клавішею Esc. Press F4 to Close - закриття клавішею F4. Я відзначаю всі пункти, щоб не злити користувачів сайту і спростити можливість закриття спливаючого вікна 😉
• 12) Налаштування автоматичного відкриття модального вікна. У нашому прикладі його використовувати не будемо.

Налаштування зовнішнього вигляду спливаючого вікна

Після створення спливаючого вікна можна налаштувати його зовнішній вигляд. Для цього переходимо в Popup Maker -> Theme.

В сторінці можна налаштувати фон модального вікна, розміри і колір шрифтів, тіні, відступи і змінити назву кнопки відповідає за закриття модального вікна.

Налаштування відкриття спливаючого вікна

Після створення модального вікна нам потрібно вирішити яким чином воно буде відкриватися. Для початку давайте розберемо яким чином можна відкрити спливаюче вікно.

При створенні модального вікна йому призначається два класи. які є унікальними ідентифікаторами модального вікна. Один з ідентифікаторів потрібно вказати в елементі. при кліці на який має відкриватися модальне вікно.

Для того щоб дізнатися class-ідентифікатор вашого модального вікна переходимо в Popup Maker -> All Popups.

На сторінці, ми бачимо два класи, які є ідентифікаторами створеного нами модального вікна, в нашому прикладі це popmake-106 і popmake-primer-vsplyivayushhego-okna. Використовувати можна будь-який з них.

Для того щоб модальне вікно працювало, потрібно додати class-ідентифікатор в елемент, при натисканні на який ми ходимо щоб модальне вікно з'являлося. Нижче наведені приклади додавання на заслання, кнопку і зображення.

У прикладі будемо використовувати клас popmake-106.

Відкриття модального вікна при кліці по посиланню:

Відкриття модального вікна при натисканні кнопки:

Відкриття модального вікна при кліці по зображенні:

Після додавання класу, модальне вікно буде з'являтися при натисканні на елемент якого ми цей клас додали.

Ось таке спливаюче вікно в результаті у нас вийде:

Проголосуйте за урок

Добрий день.
може, хто стикався з такою ось ситуацією: спливаюче вікно (в моєму випадку - з формою підписки) з'являється на кожній сторінці сайту, куди б я не перейшла. навіть після того, як підпишуся на розсилку.
як позбутися поп-апа? як зробити так, щоб після одного закриття або підписки воно більше не з'являлося?

Вітаю! Для цього вам потрібно налаштувати «Налаштувати відкриття модального вікна».

У моєму інтерфейсі такого не спостерігаю. Можливо, ось це воно: prntscr.com/cqxpeo
Я тут погралася, сяк-так можна налаштувати висновок вікна. Але! найголовнішого тут немає - виводити один раз і після закриття не виводити. Такої можливості не бачу.