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.