UX problems (with solution) of Bootstrap modals on mobile phones

Regular Bootstrap modals don’t look and feel like something native on mobile phones. They are basically the same windows from desktop version, only stretched properly to fit small mobile screens. Having enough content (for example, edit form with lots of fields) they require users scrolling all the way down to modal footer with buttons:

Regular Bootstrap modal with a lot of content on small screen

However, users are used to somewhat different UX on phones. On both iOS and Android all main buttons to perform certain actions are placed at the top navigation bar, alongside with current screen title. This makes them always accessible disregarding scrolling position of content.

To make modals behave almost as native mobile views, I’ve made a simple bootstrap-fs-modal plugin which alters behavior of modals on smaller screens while retaining original behavior in desktop browsers. It will stretch modals to full screen in order not to waste available space and place buttons at the fixed top modal header to be always accessible:

Fullscreen modal with the same content and buttons

The second problem of Bootstrap modals is that you cannot dismiss them by clicking Back button, which is quite intuitive to press on Android phones. So plugin also provides a fix for this.

Plugin can be obtained either from Github or as an npm package and is very easy to use.

First, include CSS and JS from dist folder:

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

Then you will need to slightly modify HTML. First, you will need to add class modal-fullscreen to modals which you want to be fullscreen. Other that this, the only additional modification to original layout is for buttons to appear in header of mobile fullscreen modal, you have to specify icon which will be used for button. This is a name of glyphicon provided using data-glyphicon attribute. No need to specify this attribute for Close button, it will be automatically added to the left of header.

Example:

<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>

That’s all you need. JS will automatically track show.bs.modal events and will create duplicates of all buttons with data-glyphicon attribute to modal header, wiring click events to original buttons. You can omit buttons you don’t want to have in fullscreen version of modal by not providing data-glyphicon attribute.

Feel free reusing and tailoring this plugin to your needs, source code is available on GitHub under MIT license.