仿桌面通知(非弹框提示)——pnotify

在做网站的时候,alert弹出框是非常常见的情形。但是,有些情况下,弹框对用户来说是并不友好的。调研了几个其他的提示插件了,发现pnotify比较好用,可配置性也高。

效果截图:

综合解决方案.gif

图上的效果,对用户来说还是非常友好的。

使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./pnotify.custom.min.css">
</head>
<body>
    
    <script src="./jquery-1.12.0.min.js"></script>
    <script src="./pnotify.custom.min.js"></script>

    <script type="text/javascript">
    $(function(){
        new PNotify({
            title: 'Regular Notice',
            text: 'Check me out! I\'m a notice.'
        });

        new PNotify('Check me out!');

        new PNotify({
            title: 'Regular Success',
            text: 'That thing that you were trying to do worked!',
            type: 'success'
        });
    });
</script>
</body>
</html>

更多效果,可以点击 这里

点击效果按钮,然后点击see the source即可查看源码.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,861评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,188评论 4 61
  • 遇问题,先找原因 遇到问题先从自己身上去找原因 当问题出现或者有矛盾冲突的时候, 大多数人们首先想到的是对方的不对...
    灵魂兽者阅读 255评论 0 0
  • 零几年的时候,我还是个小小少年没什么烦恼。那时候祖国形势一片大好,家里还能好吃好喝外加两层平房租在上海。那时候五百...
    跃鳞在野阅读 254评论 2 2
  • 周末一个人在家里抱着电脑看了《28岁未成年》,讲真,影片并不怎样,剧情夸张,但里面还是有几点值得我们学习。电影主要...
    灵珂阅读 1,377评论 21 45