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
   
jQuery Plugin For Creating Customizable Modal Popups - Flythat

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">&times;</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 function
  • autoOpen: false: set true for auto open with page load
  • autoClose: false: set milliseconds (number) to auto close modal after X milisencods
  • width: false: force a width for automatic position calc
  • height: false: force a height for automatic position calc
  • fadeIn: 'normal': normal, fast, slow, milliseconds (number) or false
  • fadeOut: 'normal': normal, fast, slow, milliseconds (number) or false
  • closeClass: 'close': if you need change the close trigger class
  • closeEsc: true: allow automatic modal hiding by ESC key
  • hideOnMobile: false: set true if you don't want to use flythat in mobile devices
  • backdrop: 'close': false, true or 'close' - to close on backdrop/overlay click
  • backdropClass: false: custom aditional class for backgrop/overlay
  • backdropColor: '#333333': base color for old browsers
  • backdropColorRGBA: '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.