jQuery Modal Load Content

Load any internal or external content into a responsive and dynamic modal.

Basic usage:

Define the element that contain the link to be loaded:

<a class="call-to-action" href="/page-example.html">Page example</a>

You can call the link from any element, not necessary from a href element, just call data-href:

<div class="call-to-action" data-href="/page-example.html">Example page</div>

Also, you can define the target to be loaded. So, only the content inside the .main-container class will be loaded:

<div class="call-to-action" data-href="/page-example.html" data-target=".main-container">Example page</div>

jQuery call:

$('.call-to-action').modalLoadContent();

Options:

You also can define some options, like:

• debugMode - Display messages at the console (false);
• overlayClass - Default modal overlay class (.modal-load-content-overlay);
• containerClass - Default modal class container (.modal-load-content-container);
• closeButtonClass - Default close modal class (.modal-load-content-close);
• closeButtonIcon - Icon to close modal ([Close]);
• closeButtonText - Text to close on hover (Close modal);
• errorClass - Default error class (.modal-load-content-error);
• errorText - Default error text message (The requested page could not be loaded.);

Options usage:

$('.call-to-action').modalLoadContent({
  debugMode: true,
  closeButtonIcon: 'x',
  closeButtonText: 'Click to close';
});