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

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

Вам помог ответ?