Simple Fullscreen Modal Plugin For jQuery - FModal.js

File Size: 181 KB
Views Total: 2115
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Fullscreen Modal Plugin For jQuery - FModal.js

FModal.js is a simple lightweight jQuery plugin for creating responsive, fullscreen modals with subtle modal entrance effects based on CSS3 animations.

How to use it:

1. Load the modal.css in the header for primary modal styles.

<link href="css/modal.css" rel="stylesheet">

2. Create a button to toggle a modal window. All the modal content and options can be set via data-* attributes on the button element.

  • data-entrance: Modal entrance effects. Available values: modal-translate, modal-scale and modal-fade
  • data-title: Modal title.
  • data-text: Modal content.
  • data-btn: Display a button inside the modal.
  • data-btn-text: Button text.
  • data-btn-link: Button link.
<button class="btn" 
        data-entrance="modal-translate" 
        data-title="Modal Title" 
        data-text="Modal Content">
        Click me
</button>

3. Load the jQuery library and the jQuery FModal.js script at the end of the document. That's it.

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

Change log:

2015-12-22

  • touchstart event handler added

2015-07-17

  • add esc key support to close modal

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