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

使用示例：

<!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>

更多效果，可以点击 这里 。

仿桌面通知pnotify插件的更多相关文章

  1. Chrome 桌面通知Notification

    今天2016-11-18号,最新chrome版本:V50 在网上找了好久都用不了,因为chrome版本已经是V50了,chrome在V22版本之后就取消掉window.webkitNotificati ...

  2. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

  3. HTML5桌面通知：notification

    最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...

  4. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  5. 使用 Swift 制作一个新闻通知中心插件(2)

    我们在第一部分的文章中详细讲解了创建一个通知中心插件的整体过程.我们成功的在通知中心里面显示了新闻列表.但是截止到目前,我们还不能从通知中心的列表中查看新闻的详细内容.在这次的教程中,我们就以上次的教 ...

  6. 使用 Swift 制作一个新闻通知中心插件(1)

    input[type="date"].form-control,.input-group-sm>input[type="date"].input-grou ...

  7. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  8. 漂亮灵活设置的jquery通知提示插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  9. [html5] (Notification) 桌面通知

    前几天要做一个桌面通知的功能,翻查以前做的笔记,发现webkitNotifications这个已经不能用了,baidu了下,基本都是介绍webkitNotifications的,后来在SOF上找到答案 ...

随机推荐

  1. Linux命令vi/vim编辑

    一.vi的基本概念基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下:a) 命令 ...

  2. java web实现读取指定盘符下的图像（二）

    之前写了一篇文章是关于如何读取指定盘符下的图片,虽然功能可以实现,但是使用的是I/O流的方式,效率不高.现在发现还有一个更好的办法,使用也更加的方便. 我们知道,当我们的图片是放在tomcat下web ...

  3. 客户Oracle数据库在插入数据的时候报超出最大长度的错误（规避风险）

    背景: 项目使用oracle数据,在开发环境测试一些正常.项目部署到客户的服务器上后,系统在添加数据的时候报错.输出错误信息,发现是“超出最大长度”的异常. 但是按照数据库的设计,添加的数据应该在允许 ...

  4. （三）CodeMirror - Event

    "change" (instance: CodeMirror, changeObj: object) { from, // object to, // object text, / ...

  5. SDOI HH的项链 HEOI采花

    题目大意: SDOI求一个区间内只出现一次的数的个数.多组询问. HEOI 求一个区间内出现至少两次的数的个数.多组询问. SDOI HH'neckplace如果每次询问都是1..r的话,那么我们只要 ...

  6. hdu Intelligent IME

    算法:字典树 题意:手机9键拼音:2:abc  3:def 4:ghi 5:jkl 6:mno 7:pqrs 8:tuv 9:wxyz: 第一行读入一个T,代表测试组数: 之后输入两个整数n和m, 有 ...

  7. HTML中元素水平居中。

    一丶margin:0 auto; 试用最多的方法,简单实用. 二丶vertical-align:middle; 只适用于内嵌元素,比如说一个div中有一个图片和文字,要让图片和文字中线对齐. < ...

  8. [1] Tornado Todo Day0

    Github地址: day0 初始化数据库: jakeychen@JC:~/Public/tornado_todo$ pwd /home/jakeychen/Public/tornado_todo j ...

  9. 文件:一个任务 - 零基础入门学习Python029

    文件:一个任务 让编程改变世界 Change the world by program 一个任务 这节课,我们需要一起来完成一个任务:将文件(record.txt)中的数据进行分割并按照以下规律保存起 ...

  10. iOS开发：详解Objective-C runTime

    Objective-C总Runtime的那点事儿(一)消息机制 最近在找工作,Objective-C中的Runtime是经常被问到的一个问题,几乎是面试大公司必问的一个问题.当然还有一些其他问题也几乎 ...