Snarl.js 消息弹窗

效果图示：

Snarl.js 不依赖任何库，通过函数调用，弹出消息窗口，可设定时间关闭

调用方法很简单

$('#basic-demo').click(function() {
    Snarl.addNotification({
        title: 'Ahoy there, Skipper',
        text: 'Hello, world!'
    });
});

支持图标，FontAwesome 字体

$('#icon-demo').click(function() {
    Snarl.addNotification({
        title: 'Custom Icons',
        text: 'Cool, huh? Supports images, svgs, and glyphicon fonts.',
        icon: '<i class="fa fa-globe"></i>'
    });
});

时间设定

Snarl.setDefaultOptions({
    timeout: 5000
});
// 或
$('#custom-timeout-demo').click(function() {
    Snarl.addNotification({
        title: 'Custom Timeouts',
        text: 'This notification has an 8000ms timeout!',
        icon: '<i class="fa fa-clock-o"></i>',
        timeout: 8000
    });
});

手动关闭

var noTimeoutNotification = null;
$('#no-timeout-open').click(function() {
    if (Snarl.isDismissed(noTimeoutNotification)) {
        noTimeoutNotification = Snarl.addNotification({
            title: 'No Timeout',
            text: 'Close the notification by pressing either the dismiss button on the page or in the notification.',
            icon: '<i class="fa fa-ban"></i>',
            timeout: null
        });
    }
});
$('#no-timeout-close').click(function() {
    Snarl.removeNotification(noTimeoutNotification);
});

消息类型显示为 URL 超链接

$('#snarl-callback-string').click(function() {
    Snarl.addNotification({
        title: 'String Callback',
        text: 'Click this notification to visit a url',
        icon: '<i class="fa fa-github fa-lg"></i>'
        action: 'http://github.com/hoxxep/Snarl'
    });
});

更多应用，请参考网址 https://hoxxep.github.io/snarl/

转载请注明出处：吖Go博客 » Snarl.js 消息弹窗