Як закрити попап в Elementor при кліку на посилання

У Elementor за замовчуванням модальне вікно (попап) можна закривати за допомогою хрестика або кнопки з дією “Закрити попап”. Проте якщо в модальному вікні Elementor розмістити посилання на блок тієї ж сторінки, наприклад #contact, то при кліку відбувається прокрутка до блоку, але вікно не закривається.

У цій статті ви дізнаєтеся, як вирішити цю проблему та закрити попап в Elementor при натисканні на посилання. Ми розглянемо 3 прості та ефективні варіанти реалізації за допомогою HTML і JavaScript.

---

🔧 Проблема: прокрутка працює, але попап не закривається

Наприклад, у вас є посилання такого типу:

<a href="#contact">Зв’язатися з нами</a>

Це посилання знаходиться всередині попапа, і при натисканні воно прокручує до блоку #contact, але не закриває модальне вікно. Це може створити незручності для користувача, особливо на мобільних пристроях.

Щоб це виправити, необхідно додати елемент HTML у сам попап і вставити відповідний скрипт.

---

🛠️ Варіант 1: Закриття попапа при кліку на будь-яке посилання

Цей метод дозволяє закривати попап, якщо користувач натискає на будь-яке посилання всередині модального вікна.

Що потрібно зробити:

1. Відкрийте налаштування попапа у редакторі Elementor.
2. Додайте елемент HTML-код.
3. Вставте наступний скрипт:

<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-елемент не прихований і завантажується разом із попапом.