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.

$('.demo').jfLightBoxLoad();

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"

$('.demo').jfLightBoxLoad({

  // parent container
  loadElement: 'body',

  // path to the file
  hash:$element.attr('href'),

  // trigger events
  mouseEvent:'click',

  // if you want to use an iframe
  iframe:false,

  // animation options
  animationFrom:{opacity:'0'},
  animationTo:{opacity:'1'},
  pause:0,
  speed:500,
  ease:'swing',

  // path to script
  pathToScript:null,

  // use Transit.js for CSS3 animations
  useTransit:false,

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

7. API.

// launch the external file associated with the element it's attached to
$(".demo").data("jfLightBoxLoad").launch();

// close the modal
$(".demo").data("jfLightBoxLoad").close();

// destroy the plugin
$(".demo").data("jfLightBoxLoad").destroy();

// re-init the plugin
$(".demo").data("jfLightBoxLoad").init();

Change log:

2016-03-06

• JS update

---

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