Simple and Highly Configurable jQuery Modal Window Plugin - smartModal

File Size: 23.5 KB
Views Total: 3629
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple and Highly Configurable jQuery Modal Window Plugin - smartModal

smartModal is a simple and easy-to-use jQuery lightbox plugin for creating clean and customizable modal windows by using html5 data-* attributes.

Basic Usage:

1. Include jQuery library and jQuery smartModal script on the web page

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src="jquery.smartModal.js"></script>

2. Include jQuery smartModal CSS on the web page

<link rel='stylesheet' href='jquery.smartModal.css'>

3. Create a basic modal with a trigger

<div class="smartmodal" id="demo">I'm a normal modal!</div>
<a href="#" class="demo">Click me</a>

4. Call the plugin with options

<script>
$(function() {
$.smartModal({
overlayDelay: 300, // Number of milliseconds it takes for the modal to fade in.
hideDelay: 300, // Number of milliseconds it takes for the modal to fade out.
cookieExpires: 365, //  Number of days until the modal cookies expire.
debug: false, //  Enable/disbale debug mode.
shortkeys: false, // Enable/disbale shortcut keys.
clickClose: true,  // Enable/disbale the ability to close the modals by clicking on the overlay.
animationDuration: 800, // Default number of milliseconds for the animation duration.
animationEasing: 'swing', // The default easing effect for the modal animation. See http://easings.net/
gaTracking: false, // Enable/disable Google Analytics event tracking.
shortkeys: true,
onOpen: function ( id ) {
return id;
},
onClose: function ( id ) {
return id;
}
});
});
</script>

5. Modal Class Attribute Options

<div class="smartmodal once" id="triggerID">I'll only get shown once!</div>
<div class="smartmodal auto">I'm automatic after page load!</div>
<div class="smartmodal sticky">I can't be closed!</div>

6. Modal Attribute Options

<div class="smartmodal once" id="triggerID" data-expires="7">Specify the number of days until the cookie expires.</div>
<div class="smartmodal" id="triggerID" data-time="5">I'm a timed modal!</div>
<div class="smartmodal auto" data-wait="10">I'm automatic after 10 seconds!</div>
<div class="smartmodal sticky auto" data-time="9" data-close="manual">I can't be closed until xx seconds!

Change log:

v2.2.0 (2014-05-15)

  • Created callback functions for on open and on close.

v2.1.0 (2013-09-24)

  • Fixed issue the modal woudn't initialize the settings object is defined

v2.0.0 (2013-08-10)

  • Fixed issue the modal woudn't initialize the settings object is defined

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