Modal new!

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
    });
});
Test your modal!

Options

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

  • Option
    Default
    Description
  • Option: trigger string
    Default: none
    Description: CSS selector to be automatically bound to trigger opening the modal on click.
  • Option: close string
    Default: none
    Description: CSS selector to be automatically bound to trigger closing the modal on click.
  • Option: escapeToClose boolean
    Default: true
    Description: Sets whether or not pressing the Escape key closes the modal.
  • Option: clickToClose boolean
    Default: true
    Description: Sets whether or not clicking the blackout curtain closes the modal.
Returns

Returns a modal object when assigned to a variable.

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();
  • No options
Returns

No return value.

modal.close()

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

modal.close();
  • No options
Returns

No return value.

modal.toggle()

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

modal.toggle();
  • No options
Returns

No return value.

Notifier new!

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
	});
});
Make a notification!

Options

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

  • Option
    Default
    Description
  • Option: notificationClasses string
    Default: “notification”
    Description: CSS classes to be added to the notifications container. Useful since the class .dark is available to use an alternative dark style notification (global to all notifications in this notifier).
  • Option: hoverPreventsFade boolean
    Default: true
    Description: Sets whether or not hovering over the notification prevents its automatic dismissal.

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'
});
  • Option
    Default
    Description
  • Option: title string
    Default: none
    Description: Title to be shown on the notification.
  • Option: imgSrc string
    Default: none
    Description: src attribute on preview image.
  • Option: text string
    Default: none
    Description: Main body of the notification. Limited to 140 chars (automatically truncated).
  • Option: autoRemoveMs int
    Default: 8000
    Description: Number of ms before notification is automatically dismissed (if set to do so by notifier option hoverPreventsFade).
  • Option: href string
    Default: none
    Description: If passed, wraps the entire notification in a link. Useful to provide a link to an area of attention on another page.
Returns

Returns a jQuery reference to the notification so you can manually remove it later. Feel free to stuff it in a variable.

notifier.remove()

Kills off a notification. Like an assassin..

notification = notifier.remove(id);
  • Option
    Default
    Description
  • Option: id jQuery object
    Default: none
    Description: The jQuery object reference returned by calling notifier.add().
Returns

Returns a giraffe in spandex (nothing).