October 19, 2022

Закрываем попап по условию нажатия на ссылку в Elementor

В elementor закрывать pop-up можно по закрывающей кнопке - по умолчанию крестик, или с помощью кнопки с условием закрытия попапа.

А вот если использовать внутри модального окна ссылки на страницу в которой находится пользователь, например ссылаемся на блок с id #contact, то elementor скролит до блока с #contact, но не закрывает модальное окно.

Вариант 1: Чтобы решить эту проблему необходимо в редакторе самого модального окна добавить элемент HTML-код.

элемент HTML-код.

теперь необходимо прописать код представленный ниже.

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

Теперь модальное окно без проблем будет закрываться и скролить до блока с с id #contact.

Вариант 2: В скрипте вместо тега <a> указываем класс при нажатии которого будет закрываться pop-up

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

Вариант 3: Видоизменяем скрипт — Проверяем ссылку на наличие символа. Есть ли символ # в атрибуте href с помощью indexOf('#') !== -1. Если символ # найден, то закрываем pop-up.

<script>
jQuery(function($){     
    $(document).on('click','.elementor-location-popup a', function(event){
        if ($(this).attr('href').indexOf('#') !== -1) {
            elementorProFrontend.modules.popup.closePopup( {}, event);         
        }     
    }); 
});
</script>