popular-message.js Library Examples

Download Back To CSSScript.Com

a JavaScript library that helps create toast-like info/success/warning/error notifications and loading indicators on your modern web apps.

Basic Usages

info success warning error loading

$message.info('This is an info message')
$message.success('This is a success message')
$message.warning('This is a warning message')
$message.error('This is an error message')
$message.loading('Loading...')

With Options

Custom Content

$message.info({
    content: 'Any Text Here'
})

Auto Dismiss After 2 Seconds Always Shown

$message.info('Auto Dismiss After 2 Seconds',{
    onClose:() => console.log('Close'),
    closable: true,
    duration: 2
})

$message.info('Always Shown',{
    onClose:() => console.log('Close'),
    closable: true,
    duration: 0
})

Global Configs

$message.config({
    top:85,
    duration: 4
})

Destroy

$message.destroy()

Singleton: True Singleton

$message.config({
    singleton:true
})
$message.info('This is a Singleton message.')

Disable HTML Enable HTML

// default
$message.info(htmlStr,{ duration: 0, closable: true })
$message.info(htmlStr,{
    dangerUseHtml: true,
    duration: 0,
    closable: true
})