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