Модальные окна

Для отключения прокрутки, при активной модалке, необходимо присвоить класс .disable-scroll элкементу body

Сортировка в активных закупках(планшет)

Сортировка по:

Фильтрация по тегу в активных закупках (планшет)

Для отображения окна, присвоить класс .is-visible, блоку modal
Фильтрация по тегу:

Ошибка ЧС оплаты

Ошибка

У вас имеются неоплаченные заказы.

Оплатите задолженность, чтобы

продолжить покупки!

Модалка-информер popover

Внутрь можно поместить необходимые элементы, например чекбоксы или просто текст
Чтобы отобразить элемент, необходимо присвоить класс .is-visible
Для всплывающей сортировки, необходимо присвоить класс.ds-popover_sorting элементу .ds-popover
Чтобы поповер отображался под необходимым блоком, у блока должно быть position: relative
Ошибка
Пример с чекбоксами

Модальное окно с фоном, всплывающее по центру

Для просмотра модалки на весь экран, необходимо кликнуть по ней
Для отображения окна, присвоить класс .is-visible, блоку modal
Имя окна
Здесь какой-нибудь контент
Пример модалки
Имя окна

Товар добавлен в корзину

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

Модалка выбора цвета и размера

Для отображения окна, присвоить класс .is-visible, элементу modal.
Если не выбран параметр, присвоить класс .is-warning, элементу modal__content-color и/или modal__content-size
Чтобы раскрыть весь список параметров, необходимо присвоить класс .is-expanded элементу item-params-list
При задержке отправки запроса, после нажатия на кнопку "В корзину", добавить класс .is-load элементу modal__btn-container
цвет:
  • чёрный
  • красный
  • бежевый
  • чёрный
  • красный
  • бежевый
Чтобы добавить товар в корзину,
выберите необходимый параметр
размер:
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
Чтобы добавить товар в корзину,
выберите необходимый параметр

Модалка копирование позиции на селектах

Для раскрытия списка, необходимо присвоить класс .is-toggle, элементу modal__select.
Копирование позиции
Самокат NAMELESS START SKL-014-AWS" и еще 15
названий цветов и прочего

Модалка "Список каталогов"

Для сворачивания списка, наобходимо присвоить класс .is-toggle элементу modal__content-row
Для сворачивания верхней части, наобходимо присвоить класс .is-toggle элементу modal__wrap
Для мобилки

На мобильной версии, чтобы открыть списки, необходимо нажать на ссылку modal-list-catalogs__selected-position-link
Если выбран каталог, присвоить класс .is-selected элементу modal-container__selected-catalog-wrap

Список доступных каталогов

Список выбранных позиций

Для переноса выбрано:
В каталог: Каталог не выбранВыбранный каталог ееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееее

Модалка "Карточка товара с коротким изображением"

Для скрытия забеления у описания, необходимо присвоить класс .is-no-blur элементу modal__goods-info
балетки женские с мехом козы и вставками осла, серого
Артикул: i-95483758e83259023509K453

316 руб.

417,6 руб. включая орг. сбор 16%
Цвет:
  • чёрный
  • красный
  • бежевый
  • чёрный
  • красный
  • бежевый
  • чёрный
  • красный
  • бежевый
    • Чтобы добавить товар в корзину,
    выберите необходимый параметр
Размер:
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
    • Чтобы добавить товар в корзину,
    выберите необходимый параметр
Добавить в издранное
Описание товара

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

Заполненность рядов
№
01
02
03
04
05
Позиции
1
1
1
1
1
Орг.
Зафиксировать ряд Расфиксировать ряд
Зафиксировать ряд Расфиксировать ряд
Зафиксировать ряд Расфиксировать ряд
Зафиксировать ряд Расфиксировать ряд
Зафиксировать ряд Расфиксировать ряд
Коснитесь и потяните в сторону, чтобы увидеть весь список
Ряд
Свободно
Фикс
Занято
Ваша
Подробнее о товаре

Модалка сообщение организатору v.1.1

Для включения лоадера, присвоить класс .is-load элементуimg-container_small для изображения и элементу btn_send для кнопки
Для добавления прелоадера перед загрузкой изображения, присвоить класс .is-visible элементу "img-container_small img-preloader"
Чтобы отобразить блок с ошибкой, необходимо присвоить класс .is-error, элементу modal-message-for-org.
Для статуса ошибки у полей ввода, присвоить класс .is-error елементу ds-inputs-component для поля "Тема",
и modal__select-org-catalog для поля "Сообщение".
Сообщение организатору
Ошибка при загрузке файла: несоответствие требованиям
Максимальный вес файла - 5 мб., размер - 800х600 Допустимые форматы: jpg, png

Модалка "Список каталогов" мобильная

Для отображения кнопки "Перенести", присвоить класс .is-selected элементу modal
Для переноса выбрано:
6 позиций Сбросить

В каталог: Каталог не выбран
Выбрать каталог
Для раскрытия списка чекбоксов, присвоить класс .is-toggle элементу modal__chx-container

Список выбранных позиций

Копируется только блок с чекбоксами и заголовок. Модалка не копируется!!!

Список выбранных позиций

Список выбранных позиций

Для переноса выбрано:
6 позиций Сбросить

В каталог: Каталог не выбран
Выбрать каталог

Модалка подтверждение email

При введённой почте, кнопка и граница инпута меняют состояние, для его смены необходимо присвоить класс .is-active элементу modal modal-confirm-mail

Добро пожаловать на 63pokupki.ru. Спасибо, что выбрали нас!

Пожалуйста, подтвердите адрес электронной почты. Просто кликните по ссылке в письме, отправленном на указанный e-mail
Подтверждение электронной почты необходимо для отправки вам электронного чека после покупки (в соответствии с Федеральным законом № 54-ФЗ), а также чтобы восстановить доступ к аккаунту в случае утери вами пароля.
Подтверждение электронной почты необходимо для отправки вам электронного чека после покупки (в соответствии с Федеральным законом № 54-ФЗ), а также чтобы восстановить доступ к аккаунту в случае утери вами пароля.

Вы не авторизованы

Вы не авторизованы

Для продолжения, пожалуйста, войдите в свой аккаунт или зарегистрируйтесь