Simple Fullscreen Modal Plugin For jQuery - FModal.js

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

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-title="Modal Title" 
        data-text="Modal Content">
        Click me

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

<script src="//"></script>
<script src="js/fmodal.js"></script>

Change log:


  • touchstart event handler added


  • 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.