Использовать модальные диалоги в мобильном сайте или нет?

Question

[aleksandrvin]

Оправдано ли использование модальных диалогов в мобильной представлении web-страницы (адаптивном дизайне)?


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

1. Сделать модальный диалог на каком-либо js-фреймворке и оставить адаптивную верстку ему;

2. Сделать js-wrapper для определения «на лету» размеров окна и соответственно запуска модального диалога или отображения в теле документа на всю страницу;

3. Отказаться от модального диалога и сделать в обоих вариантах через подмену (tabbing) тела документа — т.е. отображать на всю страницу.


Я использую модальные диалоги Bootstrap Modals, а они плохо себя ведут на малых экранах, если контент в диалогах не влезает на экран или требуется клавиатура для ввода. Поэтому склоняюсь к третьему пункту вообще.


Какое мнение у вас?

Answer 1

[The Whiz]

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

Answer 2

[Андрей Власов]

Модальные окна имеют свои плюсы:
— акцентируют внимание на важной информации;
— позволяют вынести информацию, которую сложно встроить на страницу, в отдельное окно, тем самым не портить текущий дизайн.

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

Предлагаю просто адаптировать модальные окна:

@media (max-width: 768px) {
    .modal {
        border: 0;
        border-radius: 0; // избавляемся от границ и скруглений
        margin: 0; // отменяем сдвиг направо (margin-left: -280px;) для больших экранов
        position: absolute;
        top: 0; // размещаем сверху
        left: 0; // отменяем центрирование для больших экранов
        width: 100%; // растягиваем на всю ширину экрана
    }
    .modal.fade.in { top: 0; } // фиксим бутстраповский хардкод
}

PS. Системными алертами можно заменить только информационные окна (с текстом и кнопками «Ок», «Отмена»). Но это лишь частный случай.
Пример адаптивной верстки выше я использовал, к примеру, на сайте дата-центра «Технодом» на странице пополнения баланса, где в модальном окне отображается не только дополнительная информация о размере комиссии, но и поле ввода суммы пополнения.

Answer 3

[EugeneOZ]

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

Answer 4

[Вячеслав Слинько]

Я вообще против этих чертовых попапов. Всюду.