SP Page Builder: конфликт всплывающих окон с анимацией блоков

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine

Недавно при создании очередного лендинга решил таки воспользоваться такой технологией как Page Builder и присмотрел для этих целей SP Page Builder. Удобная, я Вам скажу штука, но имеет все-таки недостатки, которые проявляются в виде глюков, один из которых я не только опишу в этом посте, но и покажу как его исправить.

Итак в чем была проблема. При применении анимации появления к позиции в которой находиться кнопка при клике по которой должно всплывать модальное окошко с контентом, перестает нормально работать модальное окно.

Не работающее модальное окошко

 

Если точнее, то фон, который появляется при появлении модального окошка и который должен затемнять все кроме самого модального окошка, перекрывает ВСЕ!!! в том числе и модальное окошко, и не реагирует на клики. А спасительный firebug при этом говорит что конфликта скриптов не обнаружено и все тип-топ.

Ну коли Firebug говорит что конфликта скриптов нет, (а я  ему верю 😉 ) значит дело в CSS.

Полез я искать, значит эту проблему и нашел вот что:

в файле стилей animate.min.css того самого SP Page Builder есть класс с такими стилями:

если значение последних двух строк указать none то модальное окно начинает нормально работать. Но так как эти стили являются частью CSS анимации, на которой, по большей части и работает SP Page Builder, то отключив эти две строки перестает нормально работать анимация появления блоков (при прокрутке страницы они уже есть, потом резко пропадают и только потом начинают отрабатывать анимацию появления).

Если стили эти нужны только для анимирования появления блоков, значит после того как отработает анимация, необходимость в них пропадает.

Решено! Мы просто с помощью JS при клике по кнопочке вызова модального окошка будем эти стили отключать, но только у того блока, в котором эта кнопочка находиться, чтобы не попортить анимацию для тех блоков, анимация, которых еще не отработала.

Итак!

Первым делом каждому из блоков, в которых находятся наши наши колонки, нужно указать уникальный ID (Профиль ID как он именуется в админке SP Page Builder),

Указываем ID блока

это нужно для того чтобы нашему скрипту было за что цепляться, чтобы отключать стили.

Далее в файле /components/com_sppagebuilder/assets/js/sppagebuilder.js в строке 653 после кода

 

добавляем вот этот код:

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

Пример решения проблемы актуален для версии SP Page Builder 1.0.3 Pro (на момент написания поста уже вышла версия 1.0.4, в которой описанная проблема может быть уже решена).

Если помог, прошу кликнуть в нужном месте на этой странице. Нужное место подписано ))

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (3 оценок, в среднем: 4,67 из 5)
Загрузка...