JavaScript Plugins

Setup

The modal is a much more aesthetically and functionally pleasing alternative to the horrible Javascript alert(). The modal has been rewritten from scratch as a lightweight plugin. The modal’s markup is pretty simple and its usage is even simpler.

Start by including spark.modal.min.js in your <head> tag (not necessary if you’ve already included spark.min.js).

<script src="js/spark.modal.min.js"></script>

Markup

Next, add the markup below. The <footer> is optional, as is the content (obviously!)

<aside id="exampleModal" class="modal" role="note">
    <header>
        <h3>This is a Modal!</h3>
    </header>
    <section>
        <p>Lorem ipsum dolor sit amet, ea saepe mandamus interpretaris qui, te saepe tollit option mel, ex falli deleniti nam. Agam tempor abhorreant an nam, animal persecuti no his, cu ius quando labores probatus. Te has posse homero equidem, id civibus adolescens ullamcorper eam, per dicat ignota vivendo no. Expetenda splendide inciderint ius an, vim ad iudico molestiae necessitatibus. Sit no fugit inani ornatus, at est cetero tibique prodesset.</p>
        <button class="btn flat red" id="exampleModal-close">cancel</button>
        <button class="btn flat green float-right">go forth!</button>
    </section>
    <footer>
        Some footer content <a href="#">linked</a> here
    </footer>
</aside>

Initialization

And finally, create a modal object inside your document ready function, by attaching it to the selector ID of your modal. See below for configuration options.

$(document).ready(function () {
    var modal = $('#exampleModal').sparkmodal({
        trigger        : "#exampleModal-trigger",
        close          : "#exampleModal-close",
        escapeToClose  : true,
        clickToClose   : true
    });
});

Options

The modal supports several variables/options (passed as an object).

Closures (functions)

Some closures (functions) are available for you to use with the modal object you created earlier. These are listed below with their options.

modal.open()

Opens the modal (slides into view and activates blackout curtain).

modal.open();

modal.close()

Closes the modal (slides out of view and deactivates blackout curtain).

modal.close();

modal.toggle()

Toggles visibility of the modal (opens if closed, closes if open).

modal.toggle();

Setup

Notifier produces small social-media style “bubble” notification in the lower left corner of the page (fixed positioning).

Start by including spark.notifier.min.js in your <head> tag (not necessary if you’ve already included spark.min.js).

<script src="js/spark.notifier.min.js"></script>

Markup

Next, add the markup below (use your own ID if you like).

<div class="notifications" id="exampleNotifications"></div>

Initialization

And finally, create a notifier object inside your document ready function, by attaching it to the selector ID of your notifications container. See below for configuration options.

$(document).ready(function () {
    var notifier = $('#exampleNotifications').sparknotifier({
	    notificationClasses  : 'notification dark',
	    hoverPreventsFade    : true
	});
});

Options

The notifier supports several variables/options (passed as an object).

Closures (functions)

Some closures (functions) are available for you to use with the notifier object you created earlier. These are listed below with their options.

notifier.add()

Creates a notification and automatically displays it.

notification = notifier.add({
    title         : 'Hello, I am a test notification',
    imgSrc        : 'img/thumb.jpg',
    text          : 'Some content to go in the notification.',
    autoRemoveMs  : 9000,
    href          : 'https://codewithspark.com'
});

notifier.remove()

Kills off a notification. Like an assassin..

notification = notifier.remove(id);