База знаний
по возможностям платформы

Как изменить стиль всплывающего окна (PopUp)?

Стили всплывающего окна (pop-up)

Источник изображения

Чтобы изменить внешний вид окна с формой заказа обратного звонка (PopUp), сделанного по нашему руководству, необходимо подключить стили, доступные на сайте jQuery. Как подключить стили, вам расскажет данное руководство.

Чтобы изменить внешний вид окна в первом фрагменте кода, который мы встраиваем при создании всплывающего окна, изменяем ссылку, находящуюся во второй строчке:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

Стили jQuery

Вместо http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css вписываем ссылку на любой из понравившихся стилей.

Обратите внимание! Если вы выберете стили более “старших” или “младших” версий библиотек jQuery, изменения могут не вступить в силу, т.к. версии могут конфликтовать.

Мы рекомендуем попробовать использовать одну из тем оформления PopUp формы, доступную в списке:

  • Строгий:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/base/jquery-ui.css

  • Черно/белый:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/black-tie/jquery-ui.css

  • Красный блиц:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/jquery-ui.css

  • Небесный Купертино:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/cupertino/jquery-ui.css

  • Темный улей:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/dark-hive/jquery-ui.css

  • Ночной:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/dot-luv/jquery-ui.css

  • Серый дым:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/eggplant/jquery-ui.css

  • Летний контраст:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/excite-bike/jquery-ui.css

  • Засвеченная пленка:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/flick/jquery-ui.css

  • Хипстер:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/hot-sneaks/jquery-ui.css

  • Дерево и слоновая кость:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/humanity/jquery-ui.css

  • Лягушка:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/le-frog/jquery-ui.css

  • Уголь и мята:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/mint-choc/jquery-ui.css

  • Облачность:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/overcast/jquery-ui.css

  • Чайная пыль:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.css

  • Небесная канцелярия:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css

  • Бело-серый:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css

  • Кислота в колбе:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/south-street/jquery-ui.css

  • Море и водоросли:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/start/jquery-ui.css

  • Солнечный:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.css

  • Кошелек:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/swanky-purse/jquery-ui.css

  • Виртуальность:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/trontastic/jquery-ui.css

  • Темный:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-darkness/jquery-ui.css

  • Светлый (стандарт):

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css

  • Дарт Вейдер:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/vader/jquery-ui.css

Подборка достаточно разнообразна и подойдет как для пользователей с разным вкусом, так и страниц с любым дизайном : )

Высоких вам конверсий и приятной работы!

С уважением,
служба технической поддержки LPgenerator.ru 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 3
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Илья Лысаков

    А существует ли возможность настроить popup окно под свой дизайн?

  • Avatar
    Борис Колосов

    Артем, это возможно, но нужно искать скрипты самому. Сотрудники LPgenerator, к сожалению, не имеют возможности консультировать детально по настройке библиотек jQuery.

  • Avatar
    Пользователь simakov-mw

    Как подключить более позднюю библиотеку, чтобы не было конфликта???

  • Avatar
    Илья Орлов

    Добрый день! А можно изменить название формы, я имею ввиду Заголовок "Заполните форму" на другое название?

  • Avatar
    Максим Гуйван

    Здравствуйте, Илья!

    Заголовок для формы задаётся в скрипте всплывающего окна с лид-формой, вы можете его изменить на любой другой, на скриншоте отмечено, где именно это можно сделать:
    http://prntscr.com/3nb3zh

    Если возникнут затруднения - пишите нам в службу поддержки на support@lpgenerator.ru

  • Avatar
    Юрий Глазков

    это у вас конструктор страниц, или программа для программирования? что не откроешь одни скрипты, встройте скрипт сюда, встройте туда? вы за что деньги берете, за хостинг, который 100 руб в месяц стоит?

  • Avatar
    Максим Гуйван

    Здравствуйте, Юрий!

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

    Если у вас есть какая-то конкретная задача - опишите её, возможно, есть простое решение, не требующее скриптов. Либо наоборот, задача специфичная, и только дополнительными средствами её можно решить.

  • Avatar
    Сергей Демихов

    Есть небольшое пожелание. Возле "Темный:
    http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-darkness/jquery-ui.css"
    поставьте пример в виде картинки

  • Avatar
    Алена Балакина

    Здравствуйте, Сергей!

    Спасибо за предложение. В скором времени мы добавим демо для тем.

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

    - [Всплывающая лид-форма (попап)](https://lpgenerator.ru/admin/zinnia/entry/3503/)

На базе технологии Zendesk