Обычные модальные окна Bootstrap не выглядят как родные на мобильных телефонах. По сути, это те же окна из настольной версии, только растянутые должным образом, чтобы соответствовать небольшим экранам мобильных устройств. Имея достаточно контента (например, форму редактирования с большим количеством полей), они требуют, чтобы пользователи прокручивали весь путь до модального нижнего колонтитула с кнопками:

Однако пользователи привыкли к несколько другому UX на телефонах. Как на iOS, так и на Android все основные кнопки для выполнения определенных действий размещены на верхней панели навигации вместе с текущим заголовком экрана. Это делает их всегда доступными, независимо от положения прокрутки контента.

Чтобы модальные окна вели себя почти как родные мобильные представления, я сделал простой плагин bootstrap-fs-modal, который изменяет поведение модальных окон на небольших экранах, сохраняя при этом исходное поведение в настольных браузерах. Он растянет модальные окна на весь экран, чтобы не тратить доступное пространство, и поместит кнопки в фиксированный верхний модальный заголовок, чтобы они всегда были доступны:

Вторая проблема модальных окон Bootstrap заключается в том, что вы не можете закрыть их, нажав кнопку Назад, что интуитивно понятно для нажатия на телефонах Android. Таким образом, плагин также предоставляет исправление для этого.

Плагин можно получить либо с Github, либо в виде пакета npm, и он очень прост в использовании.

Сначала подключите CSS и JS из папки dist:

<link href="dist/css/fs-modal.min.css" rel="stylesheet">
...
<script src="dist/js/fs-modal.min.js"></script>

Затем вам нужно будет немного изменить HTML. Во-первых, вам нужно будет добавить класс modal-fullscreen к модальным окнам, которые вы хотите сделать полноэкранными. Помимо этого, единственная дополнительная модификация исходного макета заключается в том, чтобы кнопки отображались в заголовке мобильного полноэкранного модального окна, вы должны указать значок, который будет использоваться для кнопки. Это имя глификона, предоставленное с использованием атрибута data-glyphicon. Не нужно указывать этот атрибут для кнопки Закрыть, он будет автоматически добавлен слева от заголовка.

Пример:

<div class="modal fade modal-fullscreen" ...>
...
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" class="btn btn-default" data-glyphicon="glyphicon-refresh">Reload Data</button>
  <button type="button" class="btn btn-default btn-primary" data-glyphicon="glyphicon-ok">Save</button>
</div>

Это все, что вам нужно. JS будет автоматически отслеживать show.bs.modal события и создавать дубликаты всех кнопок с атрибутом data-glyphicon в модальном заголовке, связывая click событий с оригинальными кнопками. Вы можете опустить кнопки, которые не хотите иметь в полноэкранной версии модального окна, не указав атрибут data-glyphicon.

Не стесняйтесь повторно использовать и адаптировать этот плагин к вашим потребностям, исходный код доступен на GitHub под лицензией MIT.