jQuery Plugin For Creating Customizable Modal Popups - Flythat
File Size: | 222 KB |
---|---|
Views Total: | 2829 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Flythat is a robust jQuery plugin that makes it easy to create highly customizable modal boxes and popup windows through Html5 data-*
attributes or explicit Javascript.
Features:
- Modals and popups are auto centered in the middle of your screen.
- Supports auto open and auto close.
- Supports embedding any Html elements such as images, text, inline elements, etc.
- Fullscreen overlay with custom fade effects.
- Can also be positioned anywhere on your web page.
- You can find more examples and usages in zip.
More examples:
Basic Usage:
1. Place the necessary jQuery library and the jQuery flythat plugin at the bottom of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="path/tojquery.flythat.min.js"></script>
2. Include the required jquery.flythat.css
in the head of the document.
<link rel="stylesheet" href="path/tojquery.flythat.css">
3. Create a text modal & popup window as follows. All the settings can be passed via Html5 data-OPTION
attributes, as in data-autoOpen="false"
.
<div class="flythat" data-autoOpen="false" id="modal-text"> <a href="#close" class="close flythat-close">×</a> <div class="text-fly"> Your text goes here </div> </div>
4. Create a link to toggle the modal popup that is set to data-autoOpen="false"
.
<a href="#" data-flythat="#modal-text">Click here </a>
5. The options can also be passed as an array in Javascript.
$("#modal-text").flythat({ OPTIONS HERE });
6. Options and defaults.
position: "center"
: left, right, left-bottom, right-bottom, center, [x, y] or a functionautoOpen: false
: set true for auto open with page loadautoClose: false
: set milliseconds (number) to auto close modal after X milisencodswidth: false
: force a width for automatic position calcheight: false
: force a height for automatic position calcfadeIn: 'normal'
: normal, fast, slow, milliseconds (number) or falsefadeOut: 'normal'
: normal, fast, slow, milliseconds (number) or falsecloseClass: 'close'
: if you need change the close trigger classcloseEsc: true
: allow automatic modal hiding by ESC keyhideOnMobile: false
: set true if you don't want to use flythat in mobile devicesbackdrop: 'close'
: false, true or 'close' - to close on backdrop/overlay clickbackdropClass: false
: custom aditional class for backgrop/overlaybackdropColor: '#333333'
: base color for old browsersbackdropColorRGBA: 'rgba(0, 0, 0, 0.75)'
: rgba colors for modern browsers with alpha channel
This awesome jQuery plugin is developed by lucasferreira. For more Advanced Usages, please check the demo page or visit the official website.