Fullscreen Mobile Friendly Bootstrap Modal – bootstrap-fs-modal

by Posted on

In this tutorial I am going to share simple jQuery plugin which enhance default bootstrap model properties and long scrollable Bootstrap modal into a fullscreen modal window to improve the user experience on mobile devices.Regular Bootstrap 3 modals (with a lot of content) on mobile devices can cause additional scrolling to get to the bottom buttons of modal.Fullscreen modal provides more native user experience on mobile phones, here is side-by-side comparison of regular and fullscreen modals:
Fullscreen Mobile Friendly Bootstrap Modal


Libraries

Insert the Bootstrap Mobile FullScreen Modal’s JavaScript and CSS files into the Bootstrap page.

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="dist/css/fs-modal.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="dist/js/fs-modal.min.js"></script>

HTML

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.



<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade modal-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by keaukraine. Visit their official github repository for more information and follow for future updates.


Published by admin