Stock Bootstrap modal behavior

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. On small screens, 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.

Here is side-by-side comparison of regular and fullscreen modals:

Regular Bootstrap Modal on Phone Fullscreen Bootstrap Modal on Phone

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.

How to use

You can obtain plugin either from GitHub or as an npm package.

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 have to add CSS class modal-fullscreen to modals which you want to work full-screen.

Plugin can create either text or icon buttons. For buttons to appear as icons, you will need to make a little modification of HTML. Plugin processes all buttons in footer except the ones with data-dismiss="modal" attribute (close button, which will be always added automatically), and adds them either as text or as icon button. Icon for button can be either Glyphicon of Font Awesome icon and is set by data-glyphicon or data-faicon attribute. If one of these attributes is set, it will add button with provided icon. If icon attribute is not set or empty, it will create text button instead. Plugin will try to apply short text by looking for short button text in data-mobile-text attribute and falling back to button text if attribute is not set.

Example:

  <div class="modal fade modal-fullscreen" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
...
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <!-- will be skipped -->
  <button type="button" class="btn btn-default" data-glyphicon="glyphicon-refresh">Reload Data</button> <!-- Glyphicon button -->
  <button type="button" id="btnTestSettingsFAButtons" class="btn btn-default" data-faicon="fa-cog">Settings</button> <!-- Font Awesome icon button -->
  <button type="button" id="btnTestRefreshTextButtons" class="btn btn-default" data-mobile-text="Reload">Reload Data</button> <!-- text button with short text -->
  <button type="button" id="btnTestSaveTextButtons" class="btn btn-default btn-primary">Save</button> <!-- text button with default text -->
</div>

That's all you need. JS automatically tracks show.bs.modal events and duplicates all buttons to modal header, wiring click events to original buttons.

Here is a demo of improved modal:


1,370 0 0