Как сделать всплывающее окно на сайте с вызовом по клику

Всплывающее окно с вызовом по клику (или модальное окно) – это хороший способ для того, чтобы отобразить не всегда нужную информацию не занимая лишнего пространства на сайте. Например, если посетителю необходимо увидеть какие-то примечания, он сможет кликнуть, и прочитать его во всплывающем окне. При этом если другому это примечание не нужно, он его и не увидит. Вот так – очень удобно. В этой статье мы покажем вам, как сделать всплывающее окно, которое будет открывать по действию пользователя.

Для решения поставленной задачи мы будем применять плагин. Это премиум плагин, в платной версии есть большие возможностей, но и бесплатная подойдёт большинству сайтов. Разберём основные возможности бесплатной версии.

Как сделать всплывающее окно с плагином Popup Builder

Popup Builder – это условно-бесплатный плагин, который позволяет создавать всплывающие окна. Окна будут открывать по клику пользователя. После создания и наполнения того или иного всплывающего окна, его можно установить в любом месте сайта с помощью шорткода.

Для начала работы выполните уже знакомые всем действия – скачайте, установите и активируйте плагин. У самого плагина нет настроек, каждое окно настраиваться отдельно. После активации плагина у вас появится дополнительный пункт в консоли «Popup Builder». Выберите в нём подпункт «Add new», чтобы сделать всплывающее окно. Здесь имеется несколько кнопок. В бесплатной версии есть только «Image» и «HTML», то есть это всплывающее окно с картинкой или с текстом. В платной версии есть больше вариантов.

Модальные окна «Image» и «HTML отличаются друг от друга только редактором, в первом можно добавить любое изображения, во втором – любой текст. В остальном настройки одинаковы:

• Popup theme. Выберите одну из пяти тем всплывающего окна.
• Effects. Очень много эффектов, которые позволяют сделать всплывающее окно уникальным и красивым.
• D Разнообразные настройки для того, чтобы настроить размер модального окна.
• Options. Дополнительные настройки, связанные с методом закрытия всплывающего окна, опциями скроллинга, эффектам при наведении и другими.

Когда все настройки будут созданы, сохраните сделанное всплывающее окно. После этого вам необходимо перейти в подпункт «All popups». Здесь вы можете видеть список всех созданных всплывающих окон, а также получить шорткод, который можете поместить в любую запись или страницу.

Обратите также внимание на эту статью, в которой мы рассказываем о специфическом всплывающем окне, специализирующемся на социальных сетях.