Для модальных окон предусмотрено 2 версии:
— десктопная;
— мобильная.
Десктопная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Background-Color-Modal@2x-1024x549.png)
Рекомендуем располагать модальные окна на белом фоне #FFF с непрозрачностью 96% — rgba (255, 255, 255, 96).
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Rounded-CornersShadow-1024x553.png)
Модальные окна располагаются на белой плашке со скруглениями 10px. К плашке всегда добавляется тень уровня Z 4.
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Высота-поп-апов@2x-1024x551.png)
Желательно, чтобы высота модального окна не превышала 550px.
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Popups-Width-1024x324.png)
Ширина модального окна зависит от количества контента и может быть трёх размеров:
— 680px (L);
— 580px (M);
— 380px (S).
Содержимое окна
Обычно модальное окно выключает в себя:
— Brand Button или Simple Button в размере Normal;
— основной текст Body M 500 (Normal);
— заголовок уровня H2.
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Окно-01@2x-1024x535.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Окно-02@2x-1024x571.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Окно-04@2x-1024x727.png)
Модальное окно может включать в себя практически любой контент.
Пример содержимого:
1. Заголовок и кнопки.
2. Заголовок, инпут и кнопка.
3. Заголовок, инпут, кнопка и чекбоксы.
Мобильная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Modal-Window-Mobile@2x-1024x916.png)
Мобильная версия модального окна может содержать:
— заголовок H1 (Mobile);
— текст Body M 500 (Normal);
— стандартные чекбоксы или радиокнопки;
— Brand button или Simple button высотой 48px.
Рекомендуем фиксировать кнопку в нижней части экрана и вытягивать ее во всю ширину.
Рекомендуем выравнивать заголовок и остальной контент по левому краю. Когда между кнопкой и содержимым окна остается свободное место, контент прибивается к верхней части экрана.
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Modal-Window-Mobile-01@2x-1024x916.png)
Если контент не помещается на странице, кнопка фиксируется в нижней части экрана на плашке с тенью Z 2. Плашка перекрывает содержимое окна.
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Modal-Window-Mobile-02@2x-1024x916.png)
Заголовок при скролле страницы уменьшается и меняется с H1 (Mobile) на Body L 500 (Compact). Рекомендуем располагать уменьшенный текст на плашке с тенью Z 1.