Как открыть попап по клику

Во вкладке Правила вывода в разделе События, при которых показывать попап отметьте правило Показать по клику на элементе и задайте необходимый селектор, например: .js-mypopup-open. Примеры других селекторов будут описаны ниже в статье.

Теперь для любого элемента можно задать класс js-mypopup-open и по клику на этом элементе будет открыт попап.

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

Примеры:

<button class="js-mypopup-open" value="Оставить заявку">
<a href="#" class="js-mypopup-open">Пример с ссылкой</a>
<img src="image.jpg" class="js-mypopup-open">

Как открыть попап по клику в меню

Перейдите в раздел Внешний вид > Меню и создайте новый пункт в разделе Произвольные ссылки. В качестве URL напишите символ решетки.

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

И отметьте галочку Классы CSS.

Теперь у любого пункта меню можно указать класс js-mypopup-open (обратите внимание без точки).

Все, после этого по клику на этот пункт меню будет вызываться попап, который мы создали ранее.

Важно, убедитесь, что на вкладке Правила вывода в разделе “На каких страницах выводить попап” установлены страницы для вывода. Если меню у вас на всех страницах и попап могут вызвать на всех страницах, должно быть установлено соответсвующее правило.

Как разместить кнопку в виджете

Суть здесь такая же — разместить элемент с классом js-mypopup-order-form.

Переходим в раздел Внешний вид > Виджеты и создаем ноый виджет HTML-код, в который размещаем код:

<button class="btn js-mypopup-order-form">Оставить заявку</button>

Здесь в примере мы добавили два класса, один btn для стилизации кнопки (во всех наших темах этот класс добавляет стили кнопок) и второй js-mypopup-order-form для вызова попап.

Селекторы

В поле Показать по клику на элементе можно указать любой jQuery селектор. Перейдем сразу к примерам:

  • .js-mypopup-order-form — точка в начале обозначает селектор по классу. Пример:
    <button class="btn js-mypopup-order-form">Оставить заявку</button>
  • #order_form — решетка в начале обозначает селектор по атрибуту ID. Пример:
    <button id="order_form">Оставить заявку</button>
  • .site-header button — здесь сработает открытие попап на всех кнопках button, которые находятся в блоке .site-header. Полезно, когда не получается задать класс или ID для элемента, на который должен открываться попап. Так мы можем задать открытие попап у вложенных элементов.
    <div class="site-header"><button>Оставить заявку</button></div>

     

Вам помог ответ?
Похожие вопросы
Нужно ли покупать Clearfy, если у меня Ваша тема?
+23
Какой хостинг подходит для хороших результатов в PageSpeed?
+14
Как выполнить действие после выбора ответа в опросе
+0
Как изменить почту, на которую приходят сообщения с формы обратной связи?
+0
C формы обратной связи не приходят письма
+9
Как исправить галерею товара
+9
Как во встроенном слайдере вместо записей выводить страницы?
+8
Как отделить категории от товаров
+8
Не работает Last-Modified
+8
В robots.txt дублируется карта сайта (Sitemap)
+8
Как добавить ссылки на предыдущую/следующую запись на странице записи?
+8
Как добавить или изменить шрифт в теме
+7
Как изменить цвет заголовка записи\страницы?
+7
Нет миниатюр
+7
Как вывести виджет анонсов записей с миниатюрами?
+7
В чем разница нашего Clearfy Pro от Webcraftic (Creative Motion) Clearfy
+7
Почему не импортируется/дублируется демо-контент?
+6
Как изменить размер миниатюры?
+6
Не работает встроенный лайтбокс
+6
Можно ли взять лицензию на один домен, а потом докупить неограниченную?
+5