У Elementor за замовчуванням модальне вікно (попап) можна закривати за допомогою хрестика або кнопки з дією “Закрити попап”. Проте якщо в модальному вікні Elementor розмістити посилання на блок тієї ж сторінки, наприклад #contact, то при кліку відбувається прокрутка до блоку, але вікно не закривається.
У цій статті ви дізнаєтеся, як вирішити цю проблему та закрити попап в Elementor при натисканні на посилання. Ми розглянемо 3 прості та ефективні варіанти реалізації за допомогою HTML і JavaScript.
🔧 Проблема: прокрутка працює, але попап не закривається
Наприклад, у вас є посилання такого типу:
<a href="#contact">Зв’язатися з нами</a>Це посилання знаходиться всередині попапа, і при натисканні воно прокручує до блоку #contact, але не закриває модальне вікно. Це може створити незручності для користувача, особливо на мобільних пристроях.
Щоб це виправити, необхідно додати елемент HTML у сам попап і вставити відповідний скрипт.
🛠️ Варіант 1: Закриття попапа при кліку на будь-яке посилання
Цей метод дозволяє закривати попап, якщо користувач натискає на будь-яке посилання всередині модального вікна.
Що потрібно зробити:
- Відкрийте налаштування попапа у редакторі Elementor.
- Додайте елемент HTML-код.
- Вставте наступний скрипт:
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup({}, event);
});
});
</script>
Після цього попап буде автоматично закриватися при кліку на будь-яке посилання, і при цьому буде виконуватися прокрутка до потрібного блоку.
🎯 Варіант 2: Закриття попапа лише при кліку на посилання з певним класом
Цей метод дозволяє налаштувати закриття попапа лише для обраних посилань, які мають вказаний клас.
Приклад скрипта:
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup .link-by-id', function(event){
elementorProFrontend.modules.popup.closePopup({}, event);
});
});
</script>Приклад посилання:
<a href="#contact" class="link-by-id">Зв’язатися з нами</a>Це зручно, якщо у попапі кілька посилань, і закривати вікно потрібно не за всіма.
🧠 Варіант 3: Закриття попапа, якщо в посиланні є якор
У цьому варіанті ми перевіряємо, чи містить посилання #. Якщо так — закриваємо попап.
Скрипт з умовою:
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
if ($(this).attr('href').indexOf('#') !== -1) {
elementorProFrontend.modules.popup.closePopup({}, event);
}
});
});
</script>Це універсальний підхід, який дозволяє не зачіпати зовнішні посилання або переходи на інші сторінки.
📋 Порівняння методів
| Метод | Умова спрацювання | Перевага |
|---|---|---|
| Варіант 1 — всі посилання | Будь-яке посилання | Мінімум коду |
| Варіант 2 — по класу | Лише елементи з певним класом | Більший контроль |
Варіант 3 — при наявності # | Тільки якірні посилання | Автоматичне визначення умов |
✅ Висновок
Щоб закрити модальне вікно в Elementor при кліку на якір, достатньо вставити короткий JavaScript-код у HTML-блок модального вікна. Вибір методу залежить від того, яке саме поведінку вам потрібно реалізувати:
- Для всіх посилань — варіант 1;
- Для вибраних посилань — варіант 2;
- Для якірних посилань — варіант 3.
Головне — вставити скрипт всередину попапа, а не на сторінку, інакше він не спрацює.
💡 Поради
- Перевірте, що ви використовуєте Elementor Pro (для підтримки модуля
popup). - Не використовуйте кілька скриптів одночасно — оберіть один варіант.
- Впевніться, що HTML-елемент не прихований і завантажується разом із попапом.
