Лучшие практики дизайна модальных окон, оверлеев, диалоговых окон

Содержание

атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

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

Предостережения для мобильных устройств

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

Демо

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

Launch demo modal

Сделать модальности можно

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

Кроме того, вы можете дать описание вашего модальное окно диалог с на .

Встраивание видео YouTube

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

Вы не знаете как должны работать модальные окна +21

02.10.20 07:31

•
Kozack
•
#521422
•
Хабрахабр

•

8600

JavaScript, Usability, HTML, Accessibility

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?

В этом материале я постарался собрать максимально полный свод правил, рекомендаций и примеров реализации по которым модальные окна должны работать.

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

Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

Стили

Создаем класс modalDialog
и начинаем формировать внешний вид:

ModalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

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

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

В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.

Может быть вы не знаете свойство pointer-events
, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog
, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”
.

Теперь добавляем псевдо класс :target
и стили для модального окна.

ModalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

Псевдо класс target
изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events
.

Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

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

document.addEventListener("DOMContentLoaded", function(){
  var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
  console.log(scrollbar);
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'hidden';
    document.querySelector('#openModal').style.marginLeft = scrollbar;
  });
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'visible';
    document.querySelector('#openModal').style.marginLeft = '0px';
  });
});

HTML5 dialog в документе

Стили для элемента dialog так же легко как и для div !

Закрыть Открыть диалоговое окно со стилями

Функция .showModal() API

Что бы сделать диалоговое окно модальным, нужно вызвать функцию .showModal() вместо .show() . Заметьте, вы не можете выделить текст в фоновом режиме или нажать кнопку для выбора кнопок в открытом диалоговом окне.

Этот слой поверх окон других элементов, независимо от значений z-index , в том числе ранее открытых модальных диалоговых окон.

При необходимости можно закрыть модальное диалоговое окно, с помощью ключа «escape»!

Добавление фона для диалогового окна

Что бы залить фон цветом, можно использовать псевдо-элемент ::backdrop .

Тусклый фон, с использованием ::backdrop . Он выделяет диалоговое окно скрывая остальное!

Закрыть Открыть диалоговое окно с фоном

Возврат значений из диалогового окна

Вы можете передать аргумент для .close() . Диалоговое окно возвращает заданное значение свойства .returnValue .

Диалоговое окно получает аргумент close(). Это будет отражено в .returnValue

Отправить Открыть диалог

Преимущества элемента <dialog>

Элемент <dialog> также отлично подходит для доступности. Браузер понимает, что элемент <dialog> является модальным, поэтому технологий, такие как программы чтения с экрана знают, какой контент должен быть интерактивным.

Кроме того, модальные диалоги размещаются вполне упорядоченно в стек «верхний слой», и находится по верх других элементов, независимо от свойств z-index . Опираясь на z-index разместить модальный диалог на вершине веб-страниц, сложно.

Позиционировать <dialog>

Диалоги имеют какое-то особые характеристики позиционирования. По умолчанию когда вы вызываете dialog.show() диалоговое окно располагается по центру окна просмотра. Конечно, вы можете изменить это, используя обычные позиционирование в CSS, например top: 15px .

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

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

Если диалоги не модальные, они ведут себя как несколько элементов <div>. Для модальных <dialog> браузер откладывает диалоговое окно в стек. Вершина стека является активно модальное диалоговое окно, которое блокирует остальные страницы документа. Всякий раз, когда модальное диалоговое окно открыто, оно помещается на вершину стека. Всякий раз, когда модальное диалоговое окно закрыто, оно удаляется из стека. Диалоги отображаются в порядке стека, поэтому активный диалог является самым высоким.

dialog, чего ждем?

С момента самой первой реализации элемента в Chrome Canary прошло уже почти 5 лет, но он по-прежнему .

На данный момент ситуация такая:

Chrome 37+ и другие браузеры на основе blink поддерживают (Opera 24+, Opera Mobile 46, Android / Chrome android 67).
В Firefox (53+) еще требуется разрешение для использования.
Safari (macOs и iOS) не поддерживают элемент, хотя запрос на включение висит с 2012 года
В Microsoft Edge элемент имеет пометку «рассматривается».
Наконец, Internet Explorer никогда не будет поддерживать .

В браузерах все довольно печально. Но за последние несколько лет был некоторый интересный прогресс с ARIA и дополнительными методами для создания пользовательских модальных диалогов.

Plerdy – умные всплывающие окна, превращающие посетителей в покупателей

Plerdy – мощный сервис для увеличения трафика и повышения продаж. Он предлагает три продукта: карту кликов, ежедневный мониторинг SEO и всплывающие окна. Умные попапы появляются по заданному сценарию, а для их настройки не требуются навыки программирования и вёрстки — внешний вид и логика задаются с помощью визуальных инструментов редактирования.

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

Плюсы:

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

Минусы:

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

Стоимость:

На Plerdy есть бесплатный тариф, однако пользоваться им для управления всплывающими окнами невозможно — слишком много ограничений. Лучше сразу выбрать платный тариф и посмотреть его на практике в течение тестового периода (14 дней).

Econom ($29 в месяц) — 3 активные формы, до 500 лидов, до 1000 кликов, адаптивный интерфейс.
Business ($59 в месяц) — 5 активных форм, до 2000 лидов, без ограничений по количеству кликов, показ окна при выходе пользователя со страницы, все варианты размещения.
Premium ($99 в месяц) — 10 активных форм, без ограничений на количество лидов.
Enterprise (стоимость рассчитывается индивидуально) — нет лимитов на количество форм и лидов.

При оплате подписки на год вы получаете скидку 20% на всех тарифах.

Анатомия модального окна

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

1.Аварийный люк

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

Кнопка Отмены
Кнопка закрытия
Клавиша Escape
Клик за пределами окна

2. Название

Дайте пользователю контекст с модальным заголовком. Это позволяет пользователям узнать, где он/она, потому что они не покинули исходную страницу. После клика по кнопке Tweet — Модальный заголовок: Создание нового твита. Дает контекст.

3. Кнопка

Ярлыки кнопок должны содержать понятные имена. Это относится к любой кнопке. Для модальных окон кнопка ‘закрыть’ должна быть представлена в виде значка кнопки ‘закрыть’ или ‘x’. У Invision понятные значки кнопок

4. Определение размера и расположения

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

Расположение — в верхней части экрана, потому что в мобильном виде модальное окно может потеряться, если поместить его ниже.
Размер — Не используйте больше, чем 50% экрана модельного окна.

5. Фокус

Когда вы открываете модальное окно, используйте эффект lightbox (затемнение фона)

Это привлекает внимание к модальному окну и указывает, что пользователь не может взаимодействовать с родительской страницей

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

19.04.11 15:00

dronov_va
Не в сети

2 Dark_Diver: Диалог Open сделать можно. Как — будет описано в статье, посвящённой файловому вводу-выводу (должны скоро быть на сайте).

20.04.11 09:35

dronov_va
Не в сети

2 Lico: Чтобы сделать, как Вы пишете, нужны дополнительные библиотеки, вроде Ext JS. А так, как я описываю в статье, можно сделать, что называется, голыми руками.

20.04.11 09:36

Lico
Не в сети

dronov_va, никакой монстроидальный extjs не нужен, нужен лишь jquery, который уже имхо де-факто стандарт.
Вот пример кода из реального проекта:

21.04.11 05:09

dronov_va
Не в сети

2 Lico: Есть ещё совсем немонстроидальный Ext Core.
Вдобавок, такое диалоговое «окно в окне» характерно для Web-приложений, выполняющихся в Web-обозревателе. Для настольных приложений (а я как раз и описываю создание настольных приложений) несколько окон — норма.

21.04.11 08:40

Lico
Не в сети

dronov_va, Взгляните, например, на фотошоп CS5 — сколько бы ни открывалось диалоговых окон, режим «единого окна» остается:
А вот что получается в случае ИЕ и настольных приложений:
Связи как таковой между этими окнами попросту нет. Если закрыть родительское окно, диалоговые так и останутся висеть. Если в родительском окне перейти на другую страницу, то оно просто не поймает то действие, которое ей попытается передать диалоговое окно. В случае же «окна в окне» — они учитывают и состояние страницы, и изменение данных на самой странице, да и страница может легко и просто управлять этим диалоговым окном.

22.04.11 20:39

dronov_va
Не в сети

2 Lico: Вообще, что такое режим «единого окна»? И где он в Photoshop CS5?
А то, что Вы показали на втором рисунке, не диалоговые окна Internet Explorer, а вполне обычные.

22.04.11 22:27

Lico
Не в сети

dronov_va, это значит никаких popup-окон за пределами родительского окна не появляется, и эти окна связаны с родительским окном и ограничены им же. ShowModalDialog конечно этому соответствует, но т.к. в других браузерах ЕМНИП не поддерживается — он ограничен только применением HTA.

23.04.11 11:53

Примеры качественных всплывающих окон

Отличный вариант – предложить купон на скидку в обмен на адрес электронной почты. Как правило, такие предложения ограничены по времени. Их цель – мотивировать человека совершить покупку как можно скорее. Скидка чаще всего не превышает 15-20 %. Все детали акции во всплывающем окне не указываются, чтобы не перегружать его информацией и представить предложение в наиболее выгодном ракурсе.

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

FiNN FLARE

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

Qlean.ru

Сайт Qlean.ru творчески подошёл к оформлению всплывающего окна. Скидка предоставляется на первую уборку в квартире. За это нужно поделиться номером телефона потенциального клиента.

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

document.addEventListener("DOMContentLoaded", function(){
  var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
  console.log(scrollbar);
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'hidden';
    document.querySelector('#openModal').style.marginLeft = scrollbar;
  });
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'visible';
    document.querySelector('#openModal').style.marginLeft = '0px';
  });
});

Разметка HTML

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

<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Модальное окно на CSS3 | Материалы сайта RUSELLER.COM</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

        <!-- Панель с кнопками -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Войти</a>
                <a href="#join_form" id="join_pop">Регистрация</a>
            </div>

        </div>

        <!-- Форма №1 для модального окна -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Здравствуй, Гость!</h2>
            <p>Вводи свой псевдоним и пароль</p>
            <div>
                <label for="login">Псевдоним</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Пароль</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Войти" />

            <a class="close" href="#close"></a>
        </div>

        <!-- Форма №2 для модального окна -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Регистрация</h2>
            <p>Нужно о себе кое-что рассказать</p>
            <div>
                <label for="email">Псевдоним (email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Пароль</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">Имя</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Фамилия</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Регистрация" />&nbsp;&nbsp;&nbsp;или&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Войти</a>

            <a class="close" href="#close"></a>
        </div>
    </body>
</html>

wx.busyinfo – позволить пользователю знать, что вы заняты

Диалог insianfo не известен. По какой-то причине он даже не имеет демонстрации в демонстрационной заявке WXPYPHON. Так что для вашего удовольствия просмотра мы создадим один сейчас.

import time
import wx

########################################################################
class MyForm(wx.Frame):
 
    #----------------------------------------------------------------------
    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY,
                          "BusyDialog Tutorial")
        panel = wx.Panel(self, wx.ID_ANY)
        
        busyBtn = wx.Button(panel, label="Show Busy Dialog")
        busyBtn.Bind(wx.EVT_BUTTON, self.onBusy)
        
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(busyBtn, 0, wx.ALL|wx.CENTER, 5)
        panel.SetSizer(sizer)
        
    #----------------------------------------------------------------------
    def onBusy(self, event):
        self.Hide()
        msg = "Please wait while we process your request..."
        busyDlg = wx.BusyInfo(msg)
        time.sleep(5)
        busyDlg = None
        self.Show()
 
# Run the program
if __name__ == "__main__":
    app = wx.App(False)
    frame = MyForm()
    frame.Show()
    app.MainLoop()

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

Создание модальных диалоговых окон

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

Требуется изменить лишь в JS файле.show() на the .showModal() . В HTML не нужно ничего менять.

(function
()
{

var
dialog
=
document
.
getElementById
(«Dialog»
)
;