Create Mobile-friendly Bootstrap Modals With jQuery - bootstrap-fs-modal

Create Mobile-friendly Bootstrap Modals With jQuery - bootstrap-fs-modal
File Size: 13 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

bootstrap-fs-modal (Bootstrap Mobile FullScreen Modal) is a small (1kb) jQuery plugin that converts the long scrollable Bootstrap modal into a fullscreen modal window to improve the user experience on mobile devices.

How to use it:

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

<!-- Stylesheet -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="fs-modal.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="fs-modal.min.js"></script>

2. That's it. The plugin works perfect with the native Bootstrap modal markups just by adding the CSS class 'modal-fullscreen' to the modal content:

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

Change log:

2017-07-12

  • Allows you to use Font Awesome icons for buttons.

This awesome jQuery plugin is developed by keaukraine. For more Advanced Usages, please check the demo page or visit the official website.