Как закрыть попап в Elementor при клике на ссылку

В Elementor закрытие всплывающего окна (попапа) реализовано по умолчанию через крестик или кнопку с действием «Закрыть попап». Однако, если в модальном окне Elementor размещена якорная ссылка на ту же страницу, например #contact, попап не закрывается — он лишь прокручивает страницу до нужного блока.

В этом материале мы рассмотрим 3 проверенных способа, как закрыть попап в Elementor при нажатии на ссылку. Все методы легко реализуются без плагинов — с помощью HTML и JavaScript.

🔧 Проблема: якорная ссылка не закрывает попап

Если вы используете ссылку вида:

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

внутри попапа, то при клике Elementor только скроллит страницу, но не закрывает модальное окно. Это может негативно сказаться на UX, особенно на мобильных устройствах.

Решение — добавить в разметку модального окна HTML-блок со скриптом, который отслеживает клик по ссылке и закрывает попап вручную.

🛠️ Способ 1: Закрытие попапа при клике на любую ссылку

Если вы хотите, чтобы при клике на любую ссылку внутри модального окна происходило его закрытие, используйте следующий код:

Добавление HTML-элемента в попап:

1. В редакторе Elementor откройте настройки нужного попапа.
2. Добавьте элемент «HTML».
3. Вставьте скрипт:

<script>
jQuery(function($){
   $(document).on('click','.elementor-location-popup a', function(event){
      elementorProFrontend.modules.popup.closePopup({}, event);
   });
});
</script>

Теперь при клике на любую ссылку внутри попапа произойдёт его закрытие. Одновременно будет выполнен скролл по якорю, если href содержит #.

🎯 Способ 2: Закрытие по классу ссылки

Иногда необходимо, чтобы попап закрывался только при клике по определённым ссылкам, а не по всем. Для этого задайте ссылке уникальный класс, например link-by-id, и модифицируйте скрипт:

<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>

Такой подход позволяет точечно управлять поведением попапа, не мешая переходу по внешним ссылкам или навигации на другие страницы.

📋 Сравнение способов

✅ Вывод

Проблема, когда Elementor не закрывает попап при скролле по якорной ссылке, решается добавлением короткого скрипта в HTML-блок модального окна. Вы можете выбрать любой из предложенных способов в зависимости от конкретной задачи:

• Хотите закрывать попап по всем ссылкам — используйте Способ 1.
• Нужно контролировать поведение — выбирайте Способ 2 или 3.

Ключевой момент — не забыть разместить скрипт в HTML-элементе внутри самого попапа, иначе он работать не будет.

💡 Полезные советы

• Убедитесь, что у вас установлен Elementor Pro, иначе модуль popup может быть недоступен.
• Если вы используете lazy load, убедитесь, что скрипт загружается при открытии попапа.
• Не добавляйте скрипт на каждую страницу — достаточно одного экземпляра в попапе.