Messages

Versatile and refined messages, ideal for daily use

Usage

You have 2 modules waiting to installation. Install 
<div class="message" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message error" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message success" data-component="message"> ...  <span class="close small"></span></div>
Warning!
You have 2 modules waiting to installation. Install 
<div class="message warning" data-component="message">
    <h5>...</h5>
    ...
    <span class="close small"></span>
</div>
You have 2 modules waiting to installation. Install 
<div class="message focus" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message black" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message inverted" data-component="message"> ...  <span class="close small"></span></div>

Options

Name Type Default
closeSelector string .close
closeEvent string click
animationOpen string fadeIn
animationClose string fadeOut

Set an option

Via data attribute:

<div class="message" data-component="message" data-close-selector=".my-custom-close">
    ... <span class="my-custom-close small"></span>
</div>

Via Javascript:

$('#my-message').message({
    closeSelector: '.my-custom-close'
});

Methods

You have 2 modules waiting to installation. Install
Method Description
close Manually closes a message.
open Opens a message if it has been closed.

Example

$('#my-message').message('close');

Callbacks

Callback Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the message has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This event is fired when the message has been closed, will wait for CSS animation to complete.

Example

$('#my-message').on('closed.message', function()
{
    // do something
})