Dynamic Customizable jQuery AJAX Modal Plugin - jfLightBoxLoad

File Size: 11.9 KB
Views Total: 1267
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Dynamic Customizable jQuery AJAX Modal Plugin - jfLightBoxLoad

jfLightBoxLoad is a compact jQuery plugin for creating an animated and fully configurable modal window that loads external html content via AJAX.

More features:

  • Custom trigger element: click, mouse hover and even drag and drop.
  • Supports iframe element.
  • Custom animation and easing effects.
  • Callback functions.

Basic usage:

1. Download the plugin and put the jfLightBoxLoad.css in the head section that will provide the primary CSS styles for your modal.

<link href="jfLightBoxLoad.css" rel="stylesheet">

2. Create an anchor link to toggle a modal window.

<a class="demo" href="external.html">Load From Anchor Click</a>

3. Load jQuery library and the jQuery jfLightBoxLoad plugin's script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.jfLightBoxLoad.js"></script>

4. Load the jQuery transit script if you want to use CSS3 transition effects.

<script src="jquery.transit.min.js"></script>

5. Initialize the plugin with default options.


6. Default plugin options. You can also override the options displayed below via HTML5 data attributes on your trigger element as in data-hash="external.html"


  // parent container
  loadElement: 'body',

  // path to the file

  // trigger events

  // if you want to use an iframe

  // animation options

  // path to script

  // use Transit.js for CSS3 animations

  // callbacks
  onStart: function() {}, 
  onStartArgs: [],
  onComplete: function() {}, 
  onCompleteArgs: [],
  onClosed: function() {}, 
  onClosedArgs: [],

7. API.

// launch the external file associated with the element it's attached to

// close the modal

// destroy the plugin

// re-init the plugin

Change log:


This awesome jQuery plugin is developed by fonstok. For more Advanced Usages, please check the demo page or visit the official website.