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:
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:
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.
First, include CSS and JS from
<link href="dist/css/fs-modal.min.css" rel="stylesheet">
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.
<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>
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
Feel free reusing and tailoring this plugin to your needs, source code is available on GitHub under MIT license.