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

时间设定

Snarl.setDefaultOptions({
    timeout: 5000
});
// 或
$('#custom-timeout-demo').click(function() {
    Snarl.addNotification({
        title: 'Custom Timeouts',
        text: 'This notification has an 8000ms timeout!',
        icon: '',
        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: '',
            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: ''
        action: 'http://github.com/hoxxep/Snarl'
    });
});

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

评论

1 条评论

  1. #1

    凌嘟嘟(2019-10-31 00:04:32)
    😋