Домой / WordPress / Как создать всплывающее (модальное) окно в WordPress
Как создать всплывающее (модальное) окно в WordPress

Как создать всплывающее (модальное) окно в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о создании модальных окон в WordPress. Возможности применения у модальных окон очень разнообразные. Их используют как для обычного всплывающего сообщения на сайте, так и для множества других задач, к примеру для создания всплывающей формы регистрации, объявления, акции и т.п.

В любом случае, главная задача модальных (всплывающих окон) — привлечь внимание пользователя.

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

Создание всплывающих окон в WordPress

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

1. Установите и активируйте плагин Popup Maker.

Как создать всплывающее (модальное) окно в WordPress

2. После активации плагина перейдите в Pupup Maker -> Add New.

Как создать всплывающее (модальное) окно в WordPress

3.  В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:

Как создать всплывающее (модальное) окно в WordPress

  • 1) Указываем название модального окна. Это название пользователю видно не будет.
  • 2) Заглавие модального окна.
  • 3) Отмечаем галочкой страницы, на которых будем использовать всплывающее окно. Если указываем «On Entrie Site» — модальное окно можно использовать на всех страницах и записях сайта.
  • 4) Наполнение всплывающего окна. Сюда пишем текст, вставляем изображения и т.п. В общем, делаем наполнение по желанию. В нашем примере я вставил фрейм видеозаписи с youtube.
  • 5) Указываем размер модального окна. Размер можно указать как в процентах, так и в пикселях. Значение «Auto» — автоматически подбирает размер модального окна. В случае добавления видеозаписи это лучший вариант.

Как создать всплывающее (модальное) окно в WordPress

  • 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
  • 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
  • 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
  • 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
  • 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.

Как создать всплывающее (модальное) окно в WordPress

  • 11) Настройки закрытия модального окна. Click Overlay to Close — закрытие модального окна при нажатии мимо него. Press ESC to Close — закрытие модального окна клавишей Esc. Press F4 to Close — закрытие клавишей F4. Я отмечаю все пункты, дабы не злить пользователей сайта и упростить возможность закрытия всплывающего окна 😉
  • 12) Настройки автоматического открытия модального окна. В нашем примере его использовать не будем.

4. После того как мы выполнили настройки, нажимаем кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.

Настройки внешнего вида всплывающего окна

После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.

Как создать всплывающее (модальное) окно в WordPress

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

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

Настройка открытия всплывающего окна

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

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

Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.

Как создать всплывающее (модальное) окно в WordPress

На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.

Как создать всплывающее (модальное) окно в WordPress

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

В примере будем использовать класс popmake-106.

Открытие модального окна при клике по ссылке:

<a href="#" class="popmake-106">Открыть всплывающее окно</a>

Открытие модального окна при нажатии кнопки:

<button class="popmake-106">Открыть всплывающее окно</button>

Открытие модального окна при клике по изображении:

<img src="popup-maker-icon.png" class="popmake-106" />

После добавления класса, модальное окно будет появляться при нажатии на элемент которому мы этот класс добавили.

Вот такое всплывающее окно в результате у нас получится:

Как создать всплывающее (модальное) окно в WordPress

Готово! Если у вас будут возникать вопросы или какие-либо проблемы при создании всплывающего окна — смело пишите в комментариях, постараюсь всем ответить и помочь.

Здравствуйте, друзья! В этом уроке мы поговорим о создании модальных окон в WordPress. Возможности применения у модальных окон очень разнообразные. Их используют как для обычного всплывающего сообщения на сайте, так и для множества других задач, к примеру для создания всплывающей формы регистрации, объявления, акции и т.п. В любом случае, главная задача модальных (всплывающих окон) - привлечь внимание пользователя. Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться. Создание всплывающих окон в WordPress И так,&hellip;

Обзор

Проголосуйте за урок

Оценка

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

Рейтинг: 4.43 ( 24 голосов )
100

162 комментария

  1. Аватар
    Наталья

    И снова здравствуйте))) Спасибо уже все работает! Разобралась!

  2. Аватар

    Здравствуйте! Подскажите пожалуйста, как сделать кнопку с шорткодом popup maker и прописать в css стиль кнопки, цвет оформление и т.д. в статье указан этот код Открыть всп лывающее окно как к нему сделать стили в css? Спасибо!

  3. Аватар

    Добрый день! Подскажите пожалуйста, как сделать так, что бы при закрытии модального окна прекращалось воспроизведение музыки и видео?

  4. Аватар

    Хорошо, спасибо.

  5. Аватар
    Виталий

    Может кто знает, как назначить плагин Pupup Maker, на кнопку предустановленную в тему? Пример: слайдер на главной странице — в нем по умолчанию кнопка, в настройках этой кнопки есть только поле для вставки ссылки, на которую ты эту кнопку назначаешь..
    Это по-поводу пункта №9 данной статьи, я так понимаю..
    А так все работает.

    • Аватар

      Чтобы назначить на кнопку слайдера, нужно чтобы была возможность редактировать саму кнопку или любой другой элемент. В стандартных слайдерах такой возможности нету, а вот в Slider Revolution (к примеру) можно так сделать без проблем.

  6. Аватар

    Можно ли сделать чтоб окно моргало? и как это сделать?

  7. Аватар
    Вероника

    Здравствуйте, не появляется окно
    1. галочка на on entire site стоит
    2. класс в ссылке стоит: Подробнее
    должно открыться окно с текстом
    Что не так?? уже отчаялась

    • Аватар
      Вероника

      на всякий случай решила проверить и поставила галочку на автоматически всплывающее окно при открытии сайта — не входит(((

  8. Аватар
    Виктория

    А вот мне надо самое примитивное окно — пользовательское соглашение. Создала, получила идентификатор popmake-249. И гн пойму куда его вставить.
    Окно долно открываться при клике на ссылку.
    Пробовала этот код вставить. Но ссылки нет. Не работет
    Пользлвательсвое соглашение
    Как я поняла,можно другим способом по п.9 «классы»ю
    Но как прописать классы?

  9. Аватар
    Александр

    Добрый день! а из пенкта меню как это реализовать?

  10. Аватар

    Здравствуйте. Полезная штука. А как это проделать в PageBuilder? Например я использую тему использующую плагин, который меня не устраивает. Хочу использовать Popup Maker, но не могу задать кнопке href, из-за того, что при переключении в редактор все в Pagebuilder-е сбрасывается. Может есть решение?

    Спасибо.

    • Аватар

      Здравствуйте. Обычно в билдере можно добавлять дополнительный класс к блокам. Этим и нужно воспользоваться. href не важен, важно только наличие класса модального окна на элементе.

  11. Аватар
    Александр

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

  12. Аватар
    Александр

    Добрый день. Как сделать чтобы всплывающее окно выпадало само, то есть не при нажатии по ссылке или кнопке, а автоматически когда человек зашел на сайт ? Спасибо за ответ.

  13. Аватар

    Здравствуйте! Меня интересует такой вопрос с помощью этого плагина можно видео открывать в сплывающем окне?

    • Аватар

      Здравствуйте. Можно.

      • Аватар

        Спасибо, а с помощью этого плагина, можно сделать, так, что бы не открывалось всплывающее окно, а просто появлялось на странице сайта когда этого захочет посетитель, как в меню вложенные страницы

        • Аватар

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

  14. Аватар

    здравствуйте! В Гугл Хроме прекрасно работает, в других браузерах — нет. Не могу понять, где искать проблему.

  15. Аватар

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

  16. Аватар

    в мозиле работает

  17. Аватар

    как сделать всплывающее окно при нажатии на ссылку в тексте?

  18. Аватар

    Привет. Как сделать, чтобы Поп-Ап окно появлялось только после скроллинга, к примеру, 30% страницы?

  19. Аватар
    Александр

    Добрый день. Подскажите как именно сделать что бы тема всплывающего окна выводилась?

  20. Аватар

    Здравствуйте, почему-то убираю галочку автоматического всплывания, а когда сохраняю, плагин, опять её ставит, в чём может быть проблема?

Оставить комментарий

Ваш email не будет опубликован.

*