Popup окно пример: Поп ап окна — 15 классных примеров и 7 советов по созданию |

Posted:

Дек 27, 2022

Comments:

Popup окно пример: Поп ап окна — 15 классных примеров и 7 советов по созданию

Содержание

ТОП-10 программ + как сделать

Pop-up — так называется окно, всплывающее поверх основного контента на сайте.

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

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

Программы для поп ап

Если не хотите тратить деньги на программистов, то можете создать всплывающее окно самостоятельно. Это не совсем легко, но возможно сделать самому с помощью онлайн-сервисов.

В этой таблице я собрала 5 топовых информеров для создания pop up на веб-ресурсе. Они все одинаково функциональны, выбирайте, какой больше понравится.

org/Offer»>

Название	Бесплатный доступ	Стоимость
GetSiteControl	Есть	от 390 руб/мес
JumpOut	Бесплатный тариф	от 199 руб/мес
Plerdy	Есть	1 750 руб/мес
Leadgenic	Бесплатный тариф	от 23 руб/сутки

Помимо специальных плагинов и сервисов для pop-up функцию его настройки можно поискать у конструкторов типа PlatformaLP, Flexbe.

Виды всплывающих окон

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

Поп-ап по центру экрана
Поп-ап на весь экран
Поп-ап внизу экрана
Поп-ап вверху экрана
Поп-ап с таймером
Поп-ап, блокирующий контент

Цели поп-ап

Откуда будут всплывать окна на Вашем сайте зависит конкретно от него и Ваших предпочтений. Другое дело — для чего они Вам нужны, какие цели Вы преследуете. Если правильно подобрать popup по цели, он точно принесет пользу Вашему бизнесу.

На правах рекламы

1. Приветствие

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

Приветствие

2. Подписка на email-рассылку

Этой формой можете предложить клиенту стать постоянным получателем email-рассылки. Но, при этом важно показать, какую пользу получит пользователь после постоянного получения Ваших писем.

Подписка на email-рассылку

3. Подписка на push-уведомления

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

Подписка на пуш

4. Регистрация на сайте

Попап поможет Вашим гостям завести личный кабинет на web-ресурсе для более удобного управления покупками. Форма будет открываться только для тех, кто не зарегистрировался.

Регистрация

5. Подтверждение локации

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

Подтверждение локации

Важно. Продавайте больше, информируя клиентов через E-mail, Viber, SMS, Web-push рассылки. Для этого рекомендуем надежный сервис UniSender. Кликайте и тестируйте -> UniSender

6. Подписка на соцсети

Такие баннеры обеспечат Вам стабильный поток целевых пользователей в различные социальные аккаунты. Это очень положительно повлияет на рост аудитории в сообществах Вашей компании.

Подписка на соцсети

7. Информирование о скидках и акциях

Информация такого рода в поп-ап повышает эффективность рекламных кампаний и привлекает внимание к маркетинговым мероприятиям.

Форма может показываться как при первичном входе на сайт, так и при повторном. В первом случае она мотивирует пользователя совершить первый заказ со скидкой, а во втором — работает над увеличением базы Ваших постоянных клиентов.

Информирование о скидках и акциях

8. Реклама мероприятия/события

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

Реклама мероприятия/события

9. Помощь при взаимодействии

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

Помощь при взаимодействии с сайтом

10. Получение обратной связи

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

Получение обратной связи

11. Заказ обратного звонка

Pop up окно обеспечит коммуникацию между клиентами и Вашими менеджерами по продажам. То есть он может перезвонить пользователю в течение нескольких минут или в удобный момент. Для этого посетителю нужно предложить выбрать дату и время для совершения обратного звонка с сайта.

Заказ обратного звонка

12. Сбор вопросов

С помощью окна Вы сможете собрать актуальные вопросы с пользователей. А их можно использовать для генерации контента на веб-ресурсе, проработки возражений, формирования болей и потребностей целевой аудитории. Также вопросы посетителей помогут реализовать индивидуальный подход к каждому из них и грамотно подвести к продаже.

Сбор вопросов

13.

Проведение опроса

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

Проведение опроса

14. Заполнение заявки

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

Сбор заявок

15. Удержание клиента

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

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

Удержание клиента

16.

Формы с кнопкой

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

Форма с кнопкой

17. Встроенная форма (сбор данных)

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

Встроенная форма

18. Брошенная корзина/напоминание о покупке

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

Напоминание о покупке

19. Геймификация

Хороший способ — и развлечь, и базу собрать, например. Вы можете выбрать любой формат: колесо удачи, выбор варианта из нескольких и т. п. И добавить форму, например, сбора e-meil.

Игра

Советы для всплывающих окон на сайте

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

Время показа. Не показывайте поп-ап в первые секунды. Дайте пользователю освоиться. Окно с горящим предложением может отпугнуть своей напористостью;

Значок закрытия. Не скрывайте крестик, отвечающий за сворачивание окна. Если пользователь не увидит кнопку закрытия в первую секунду, он, скорее всего, покинет сайт;

Звук. Исключите звуковое сопровождение при появлении pop-up. Это может быть короткий сигнал, точно не рекламная голосовая запись или фоновая мелодия — они отвлекают;

Текст. Посетитель не станет тратить время на чтение в поп-ап простыни текста. К тому же, выглядеть оно будет так себе: мелкий нечитаемый шрифт, множество абзацев;

Маркетинговые фишки. Используйте в всплывающих окнах такие фразы, как, “бесплатно”, “специально для Вас”. Они станут неплохими триггерами для привлечения клиентов;

Дизайн. В оформлении pop up придерживайтесь фирменного стиля, корпоративных цветов. Если форма сочетается с сайтом, она внушает доверие;

Количество окон. Не используйте большое количество поп-апов на одном ресурсе, даже если они выполняют разные функции. Такая активность вызовет ощущение назойливости;

Пояснение. Рассказывайте пользователю, зачем Вы просите его заполнить поля. Например, “Укажите город, и Вы увидите, есть ли товар в наличии»;

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

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

Лайфхак. Повышайте конверсию сайта через квизы. Алгоритм очень прост: посетитель проходит тест, рассказывает потребность и оставляет контакты; Вы связываетесь с ним и предлагаете тот продукт, который реально нужен. Кликайте и создавайте Ваш первый квиз -> Marquiz

ВКЛЮЧАЙТЕСЬ В СОЦСЕТИ
УЖЕ 40 000+ С НАМИ

Екатерина

Сергей

Иван

Елена

Екатерина

Коротко о главном

Утверждение, что всплывающие окна не приносят пользу бизнесу, а лишь раздражают посетителей сайта — это миф. На самом деле, поп-апы — мощный маркетинговый инструмент, который положительно влияет на уровень продаж, информирование клиентов и качество обслуживания. И, конечно, если Вы хотите самостоятельно разработать поп-ап окно, то рекомендуем воспользоваться сервисами GetSiteControl, JumpOut, Plerdy и Leadgenic.

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

Увеличение количества подписчиков и клиентов;

Повышение конверсии;

Привлечение внимания к важной информации;

Реклама товаров, услуг, акционных предложений;

Удержание пользователей на сайте;

Увеличение глубины просмотра и времени пребывания.

Возможность заблокировать/скрыть поп-апы в браузере;

Риск снижения скорости работы сайта;

Расценивание всплывающих окон как спама.

При правильной разработке pop-up окон можно добиться вполне высокой конверсии. Главное, помните, что стоит учитывать не только хорошо проработанную форму, но и поведение пользователей. Важно анализировать ЦА: что она делает, на что тапает и тд. И только тогда можно говорить о правильно спроектированном поп-ап окне 🙂

✅ Что такое Pop-Up: Определение, Примеры, Видео — Определение

Pop-up — это всплывающее окно, которое появляется во время посещения страницы. Маркетологи используют его для лидогенерации, а также для рекламы услуг и продуктов компании. В сервисе SendPulse вы можете создавать умные поп-апы, которые отображаются по определенным сценариям. С их помощью вы сможете повысить вовлеченность посетителей вашего сайта и конвертацию лидов.

Pop-up — это эффективный способ привлечения внимания посетителей сайта. Главное при подключении всплывающего окна — думать об интересах пользователей. Если pop-up будет появляться из ниоткуда, то вероятнее всего вызовет раздражение у посетителя, так как прервет его деятельность на сайте. Важно, чтобы всплывающее окно было к месту и являлось функциональным дополнением, которое в нужный момент поможет пользователю выполнить необходимое действие. Только так с помощью pop-up вы сможете продвигать клиентов вниз по воронке продаж.

Давайте посмотрим, насколько полезными могут быть pop-up для вашей бизнес-стратегии.

Возможности pop-up

Генерация подписчиков

Продвижение контента

Уменьшение bounce rate

Pop-up — это многофункциональный инструмент, который помогает конвертировать трафик на сайте в лиды. Вот краткий список его основных возможностей:

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

Продвижение контента. Основная цель pop-up — это лидогенерация, однако вы можете создать лид-магнит и рекламировать свою PDF книгу, руководство или курс, релевантный странице, на которой находится посетитель. Так вы продемонстрируете свой опыт в этой области и поможете аудитории решить их проблемы. Например, аграрии могут поделиться своими прогнозами урожая на следующий год в сельскохозяйственном блоге.

Уменьшение bounce rate. Эта метрика показывает, насколько быстро пользователи покидают сайт. Чтобы снизить показатель bounce, многие маркетологи используют pop-up, в котором просят посетителей оставить email адрес, номер телефона или другую информацию для дальнейшей коммуникации. Такое всплывающее окно обычно появляется, когда пользователь собирается закрыть вкладку или покинуть сайт.

Давайте посмотрим на несколько примеров и визуализируем некоторые возможности pop-up.

Примеры pop-up

Mango мотивирует посетителей сайта стать подписчиками с помощью скидки и эксклюзивных предложений. Выгодное предложение — это результативный способ перевести пользователя на следующий этап пути покупателя. Далее с помощью email рассылок вы можете взращивать лиды и конвертировать их в клиентов.

Farfetch использует максимально простой дизайн pop-up. На первый взгляд — ничего особенного. Однако, присмотритесь, помимо скидки и описания выгод подписки компания использует чек-бокс для сегментации по полу. Согласитесь, отличный ход, чтобы уже первую рассылку сделать более релевантной.

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

Готовы попробовать создать свой первый pop-up?

Как создать pop-up в SendPulse?

Зарегистрируйтесь в SendPulse

Создайте проект

Создайте поп-ап

Следуйте этой простой инструкции, чтобы создать умный поп-ап, который улучшит конверсию, повысит вовлеченность и снизит количество отписок.

Шаг 1. Зарегистрируйтесь в SendPulse

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

Шаг 2: Создайте проект

Прежде чем добавить поп-ап, вам нужно создать проект, поп-ап для которого вы хотите настроить. Проект — это рабочее пространство с определенными настройками. Для проекта вы можете подключить сайт, созданный в SendPulse, или добавить скрипт проекта на свой сайт. Вы можете создать отдельный проект под каждый домен, что позволит отслеживать статистику по каждому сайту отдельно, или добавить несколько доменов в проект, чтобы работать с мультиязычными сайтами, например.

Итак, для того, чтобы создать проект, перейдите в раздел «Попап» и нажмите «Создать проект».

Чтобы установить поп-ап на сайт, созданный в SendPulse, выберите сайт, созданный в конструкторе сайтов, мини-лендингов или при создании курсов.

Нажмите «Подключить сайт» и код проекта будет автоматически добавлен в настройки сайта.

Чтобы добавить поп-ап на сторонний сайт, введите ссылку на него.

Нажмите «Подключить код».

Шаг 3: Создайте поп-ап

Вы можете создать поп-ап, который будет отображаться по определенному сценарию. Триггером может быть поведение пользователя, определенное действие, или информация, считанная во время перехода на сайт. Чтобы создать персонализированное предложение, вы можете активировать поп-ап по одному из 20+ условий или комбинировать их между собой.

Нажмите «Добавить попап», чтобы создать виджет по сценарию.

Во вкладке «Сценарии показа» будут отображаться все созданные поп-апы. Выберите нужный поп-ап, чтобы активировать, деактивировать или редактировать его.

Перейдите в созданный проект во вкладку «Сценарии показа» и нажмите «Создать попап».

Вы можете выбрать шаблон поп-апа из списка популярных, праздничных, по типу.

Далее настройте внешний вид поп-апа.

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

Далее выберите цвет фона и расположение поп-апа на странице.

Справа вы видите, как будет выглядеть поп-ап на вашем сайте.

Напишите сообщение. Вы можете добавлять ссылки и использовать эмодзи.

Настройте ожидаемое от пользователя целевое действие, например, подписка на рассылку, запрос телефона.

После настройки условий, нажмите «Сохранить и опубликовать».

Подробнее о том, как создать умный поп-ап, читайте в этом руководстве.

Теперь, вы знаете, как удерживать посетителей на вашем сайте и собирать контакты потенциальных покупателей с помощью SendPulse. Также вы можете собирать все лиды в CRM от SendPulse. Читайте наши рекомендации по созданию поп-апа, которые конвертирует.

Как создать эффективный pop-up

Сделайте форму максимально простой

Придерживайтесь правильной структуры

Расскажите, чего ожидать после подписки

Предложите бонус в обмен на email

Разрабатывайте брендированные pop-up окна

Установите связь между контентом и pop-up окнами

Используйте куки

Экспериментируйте с pop-up формой

Адаптируйте формы для мобильных

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

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

Расскажите, чего ожидать после подписки. Укажите в pop-up, как часто и какие письма будет получать подписчик. Так ваш список рассылки будет пополняться только заинтересованными пользователями.

Предложите бонус в обмен на email. Это называют лид-магнитом. Он мотивирует пользователей оставлять свои контактные данные. Бонус должен быть конкретным и существенным. Например, предложите скидку на первую покупку или чек-лист для специалиста вашей области.

Разрабатывайте брендированные pop-up окна. Дизайн всплывающих окон должен соответствовать дизайну вашего сайта. Используйте лого, фирменный шрифт, цвета, фон. Это повысит узнаваемость бренда и поможет пользователю сформировать о нем целостную картинку.

Установите связь между контентом и pop-up окнами. Например, у вас есть интернет-магазин. В разделе товаров предложите подписаться на акции, в разделе уценки — на последние и самые выгодные новинки, на блоге — на интересующие статьи.

Используйте куки. Предоставляйте опции «Не показывать больше» и «Я уже подписался», чтобы всплывающее окно не преследовало пользователя зря.

Экспериментируйте с pop-up формой. Тестируйте ее расположение и размеры, отдельные элементы, условия показа. Так вы найдете лучший вариант для вашего бизнеса.

Адаптируйте формы для мобильных. Хуже всплывающей на весь экран мобильного формы — это та, которую невозможно закрыть. Такой pop-up не только будет раздражать, но испортит UX. Используйте адаптивные формы, которые будут хорошо смотреться на самом маленьком разрешении экрана.

Открыть всплывающее окно — Всплывающие окна

[00:00]
В этом уроке я расскажу о всплывающих окнах, включая их свойства и способы их открытия. Для начала я создам всплывающее окно. В разделе видения моего дизайнера я могу щелкнуть правой кнопкой мыши Windows и щелкнуть всплывающее окно. Откроется приглашение нового окна, и я могу назвать свое новое окно. Я назову его «Мое всплывающее окно» и нажму «Создать окно». Я не хочу, чтобы он был пуст. Поэтому я собираюсь добавить к нему метку. Я дам ему текст: Это всплывающее окно!! Теперь, когда у меня есть всплывающее окно, давайте откроем его. У меня есть главное окно в моем проекте, которое автоматически открывается при запуске. Я хочу разместить кнопку в этом окне, которая открывает мое новое всплывающее окно. Теперь, когда у меня есть кнопка в главном окне, я могу дважды щелкнуть ее, чтобы открыть окно сценариев компонента.

[01:05]
Я выберу обработчик событий actionPerformed и на вкладке «Навигация» нажму круговую кнопку «Открыть/Поменять местами». Хотите, чтобы всплывающее окно открывалось и располагалось по центру, и я выберу «Мое всплывающее окно» в раскрывающемся меню. Как только я закончу здесь, я нажму «ОК» и смогу протестировать свое новое окно, сохранив и запустив клиент. Если я нажму кнопку, вы увидите, что открывается всплывающее окно. Я могу щелкнуть и перетащить, чтобы переместить его, я могу изменить его размер и закрыть. Я вернусь к дизайнеру и рассмотрю некоторые способы настройки всплывающего окна. Вернувшись в конструктор, я выберу всплывающее окно в браузере проектов. Всплывающее окно — это просто окно с определенными настройками. В частности, всплывающее окно было плавающим окном, которое не запускалось в развернутом виде.

[02:05]
Давайте взглянем на Редактор свойств, чтобы увидеть, что можно настроить в моем всплывающем окне. Свойства Behavior позволяют мне делать такие вещи, как закрытие или изменение размера. В свойствах внешнего вида я могу настроить заголовок для своего всплывающего окна. Например, я могу изменить заголовок на что-то вроде «Супер классное всплывающее окно». Теперь, если я сохранюсь и вернусь к клиенту, вы можете увидеть заголовок здесь. Наконец, свойства макета позволяют мне изменять такие вещи, как расположение и размер всплывающего окна. Если вы хотите использовать свойство местоположения для своего всплывающего окна, обязательно снимите флажок с параметра «Центр» и «Действие навигации», так как это переопределит свойство местоположения. Если я вернусь к клиенту, открою всплывающее окно и щелкну за его пределами, вы увидите, что оно остается перед главным окном.

[03:04]
Это контролируется свойством Layer. Окна с более высокими номерами слоев всегда будут находиться поверх окон с более низкими номерами слоев. Главное окно настроено на слой 0, поэтому, если я изменю всплывающее окно на слой 0, я могу сохранить, открыть всплывающее окно, щелкнуть главное окно, и всплывающее окно исчезнет. Если я нажму Windows, я увижу, что она все еще открыта. Но он потерял фокус на другом окне в том же слое, поэтому он становится скрытым. Чтобы вернуть его, я могу просто щелкнуть его в меню здесь. Есть еще одно замечание, которое изменит поведение всплывающих окон. Если я щелкну и перетащу всплывающее окно к краю моего окна клиента, вы увидите, что окно клиента становится больше. Это контролируется настройкой в свойствах проекта.

[04:04]
В конструкторе я могу щелкнуть «Проект», «Свойства проекта» и щелкнуть «Пользовательский интерфейс» в свойствах зрения. Если я сниму отметку со свойства «Бесконечный рабочий стол» и сохраню, я смогу вернуться к клиенту, и когда я щелкну и перетащу окно к краю экрана, поведение изменится, и теперь всплывающее окно не будет двигаться дальше.

В этом уроке я расскажу о всплывающих окнах, включая их свойства и способы их открытия. Для начала я создам всплывающее окно. В разделе видения моего дизайнера я могу щелкнуть правой кнопкой мыши Windows и щелкнуть всплывающее окно. Откроется приглашение нового окна, и я могу назвать свое новое окно. Я назову его «Мое всплывающее окно» и нажму «Создать окно». Я не хочу, чтобы он был пуст. Поэтому я собираюсь добавить к нему метку. Я дам ему текст: Это всплывающее окно!! Теперь, когда у меня есть всплывающее окно, давайте откроем его. У меня есть главное окно в моем проекте, которое автоматически открывается при запуске. Я хочу разместить кнопку в этом окне, которая открывает мое новое всплывающее окно. Теперь, когда у меня есть кнопка в главном окне, я могу дважды щелкнуть ее, чтобы открыть окно сценариев компонента.
[01:05] Я выберу обработчик событий actionPerformed и на вкладке «Навигация» нажму круговую кнопку «Открыть/Поменять местами». Хотите, чтобы всплывающее окно открывалось и располагалось по центру, и я выберу «Мое всплывающее окно» в раскрывающемся меню. Как только я закончу здесь, я нажму «ОК» и смогу протестировать свое новое окно, сохранив и запустив клиент. Если я нажму кнопку, вы увидите, что открывается всплывающее окно. Я могу щелкнуть и перетащить, чтобы переместить его, я могу изменить его размер и закрыть. Я вернусь к дизайнеру и рассмотрю некоторые способы настройки всплывающего окна. Вернувшись в конструктор, я выберу всплывающее окно в браузере проектов. Всплывающее окно — это просто окно с определенными настройками. В частности, всплывающее окно было плавающим окном, которое не запускалось в развернутом виде.
[02:05] Давайте заглянем в Редактор свойств, чтобы увидеть, что можно настроить в моем всплывающем окне. Свойства Behavior позволяют мне делать такие вещи, как закрытие или изменение размера. В свойствах внешнего вида я могу настроить заголовок для своего всплывающего окна. Например, я могу изменить заголовок на что-то вроде «Супер классное всплывающее окно». Теперь, если я сохранюсь и вернусь к клиенту, вы можете увидеть заголовок здесь. Наконец, свойства макета позволяют мне изменять такие вещи, как расположение и размер всплывающего окна. Если вы хотите использовать свойство местоположения для своего всплывающего окна, обязательно снимите флажок с параметра «Центр» и «Действие навигации», так как это переопределит свойство местоположения. Если я вернусь к клиенту, открою всплывающее окно и щелкну за его пределами, вы увидите, что оно остается перед главным окном.
[03:04] Это контролируется свойством Layer. Окна с более высокими номерами слоев всегда будут находиться поверх окон с более низкими номерами слоев. Главное окно настроено на слой 0, поэтому, если я изменю всплывающее окно на слой 0, я могу сохранить, открыть всплывающее окно, щелкнуть главное окно, и всплывающее окно исчезнет. Если я нажму Windows, я увижу, что она все еще открыта. Но он потерял фокус на другом окне в том же слое, поэтому он становится скрытым. Чтобы вернуть его, я могу просто щелкнуть его в меню здесь. Есть еще одно замечание, которое изменит поведение всплывающих окон. Если я щелкну и перетащу всплывающее окно к краю моего окна клиента, вы увидите, что окно клиента становится больше. Это контролируется настройкой в свойствах проекта.
[04:04] В конструкторе я могу щелкнуть «Проект», «Свойства проекта» и щелкнуть «Пользовательский интерфейс» в свойствах видения. Если я сниму отметку со свойства «Бесконечный рабочий стол» и сохраню, я смогу вернуться к клиенту, и когда я щелкну и перетащу окно к краю экрана, поведение изменится, и теперь всплывающее окно не будет двигаться дальше.

Kivy Tutorial Python — Popup Windows

Подпишитесь на Tech With Tim!

Этот туториал покажет вам, как создать всплывающее окно Kivy.

Импорт модулей

Для этого руководства потребуются следующие модули.

 импортный киви
из kivy.app импортировать приложение
из kivy.uix.widget импортировать виджет
из kivy.properties импортировать ObjectProperty
из kivy.uix.label импортировать метку
из kivy.uix.floatlayout импортировать FloatLayout
из kivy.uix.popup импортировать всплывающее окно

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

Создание всплывающего окна на самом деле довольно просто.

Первое, что нам нужно сделать, это создать новый класс, который будет содержать содержимое нашего всплывающего окна. Я назову свою «П». Он будет унаследован от FloatLayout, так что я смогу использовать size_hint и pos_hint.

 класс P (FloatLayout):
    проходить

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

 <П>:
    Этикетка:
        текст: "Вы нажали кнопку"
        размер_подсказка: 0,6, 0,2
        pos_hint: {"x":0,2, "верх":1}
    Кнопка:
        текст: "Вы нажали кнопку"
        размер_подсказка: 0,8, 0,2
        pos_hint: {"х":0,1, "у":0,1}

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

 по умолчанию show_popup():
    show = P() # Создать новый экземпляр класса P
    popupWindow = Popup(title="Всплывающее окно", content=show, size_hint=(None,None),size=(400,400))
    # Создаем всплывающее окно
    popupWindow. open() # показать всплывающее окно

Теперь всякий раз, когда мы вызываем функцию show_popup() , будет отображаться всплывающее окно.

Запуск всплывающего окна

Теперь, когда мы создали функцию show_popup(), все, что нам нужно сделать, это вызвать ее для отображения всплывающего окна. Для этого мы создадим метод внутри нашего класса Widgets, который будет просто вызывать show_popup(). Чтобы вызвать этот метод, мы будем вызывать его из события on_release нашей кнопки.

 виджеты класса (виджет):
    деф бтн(я):
        Показать всплывающее окно()

 <Виджеты>:
    Кнопка:
        текст: «Нажми на меня»
        on_release: root.btn()

Теперь, когда мы нажимаем кнопку, мы должны увидеть всплывающее окно!

Полный код

импортный киви
из kivy.app импортировать приложение
из kivy.uix.widget импортировать виджет
из kivy.properties импортировать ObjectProperty
из kivy.uix.

This entry was posted in Популярное

Posted:

Comments: