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:
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
First, include CSS and JS from
<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-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.
<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: