Lightweight jQuery Modal Plugin with Scrollbar Support - faModal

faModal is a super tiny jQuery modal plugin used to create a responsive modal window that takes over the browser's scrollbar in case the modal content is longer than the browser's window height.

How to use it:

1. Import jQuery library and the jQuery faModal plugin's files into the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" href="path/to/jquery.faModal.css">
<script src="path/to/jquery.faModal.js"></script>

2. Create a button to toggle a modal window (OPTIONAL).

<button class="btn">Click me</button>

3. Create the content for the modal window.

<div class="fa-modal my-modal">
  <div class="fa-modal__close-btn"></div>
  ... Modal Content...
</div>

4. Initialize the modal window.

$modal = $('.my-modal').faModal();

5. Enable the modal toggle button using 'show' method.

$('.btn').click(function () {
  $modal.faModal('show');
});

6. Hide the modal window.

$('.btn-hide').click(function () {
  $modal.faModal('hide');
});

Change log:

2015-01-03

• All animations in CSS3

---

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