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'; });