Messages

Versatile and refined messages, ideal for daily use

2 minute read Published: 10 Apr, 2017

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>

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>

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

You have 2 modules waiting to installation. Install

Method	Description
`close`	Manually closes a message.
`open`	Opens a message if it has been closed.

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

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.

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