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

Во вкладке Правила вывода в разделе События, при которых показывать попап отметьте правило Показать по клику на элементе и задайте необходимый селектор, например: .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>

     

Вам помог ответ?
Похожие вопросы
Какой хостинг подходит для хороших результатов в PageSpeed?
+8
Нужно ли покупать Clearfy, если у меня Ваша тема?
+19
Как выполнить действие после выбора ответа в опросе
+0
Как вывести виджеты в подвале сайта?
+9
Как вывести встроенную форму подписки?
+8
Как изменить поля формы обратной связи?
+8
Как вывести рекламу на страницах?
+8
Что означает ошибка publisher в микроразметке?
+8
Как изменить количество записей на главной и в рубриках
+7
Как во встроенном слайдере вместо записей выводить страницы?
+6
Почему не показывается количество просмотров?
+6
Что значит код ответа 202 в IndexNow
+6
Как добавить поиск в шапку сайта?
+6
Как выровнять логотип и название сайта по центру?
+6
Как отключить защиту от перебора паролей?
+6
Забыл адрес админки, как временно отключить функцию?
+6
Как на главной странице и в архивах рандомно вывести карточки постов разных размеров?
+6
Как изменить цвет активного пункта меню?
+5
Как добавить кликабельный номер телефона в шапку сайта?
+5
Как добавить или изменить шрифт в теме
+4