在做网站的时候，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. How to build UDK2015？

    UDK2015 is a stable release of portions of the EDKII project. 本文记录在Win7下用VS2012 编译UDK2015的过程. Step1, ...

  2. VMware SphereESXi上传系统镜像

    VMware SphereESXi上传系统镜像 打开右侧[摘要]选项卡 在[资源]中选择存储器中的存储,右键[浏览数据库存储] 选择工具栏[创建文件夹]图标,命名后保存 这样随后找到存储设备,浏览刚才 ...

  3. asp.net 如何改变GridView搜索出来关键字的颜色？就像百度似的，我获得的是一个集合，改变集合中关键字的集合

    输入“产量”查询,将“产量”拆分,产.量 string strColNameCnDt = string.Empty;            for (int j = 0; j < dtTemp. ...

  4. gridView 布局间距合理化的有效办法

    网上有很多人闻到过这个问题,给出好多办法,多数人并不是意见提的不对,而是没有抓住问题的本质 . 因为我要做一个girdView的demo实例,遇到了这个问题 与大家一起分享,如果有想要demo的请给我 ...

  5. 关于局域网内IIS部署网站，本机可访问，而网内其他用户无法访问问题的解决方法

    在Window7操作系统中安装配置好IIS后,在本地IIS上部署网站程序没有问题,但是局域网等远程用户不能正常访问网站程序,提示“Internet Explorer 无法显示该网页”. 问题解决思路如 ...

  6. 转载Eclipse中Maven WEB工程tomcat项目添加调试

    转载地址: http://blog.csdn.net/free4294/article/details/38260581 一.建立一个maven  WEB项目 1.file->new->o ...

  7. 类XX是公共的，应在名为XX.java的文件中声明public class XX

    找了一个程序粘贴到txt文档中,随便起个名为abc,然后改后缀为.java,接下来在dos中运行时出现以上错误 打开abc.java看了看,声明public class了,但是名字是粘贴过来的类名Wo ...

  8. ng-bind-html 的使用

    AngualrJS 提供了指令ng-bind-html 用于绑定包含HTML标签的文档,使用方式: <ANY ng-bind-html=""> ... </ANY ...

  9. 一种针对虚拟机的应用软件License认证方法

    由于虚拟机的硬件信息可以随意修改,使得虚拟机可能具有相同的硬件信息,在传统的应用软件License认证方式中会导致License认证漏洞.本专利提供了一种有效的解决方法. 文/王宏财 目 前,云计算的 ...

  10. Keil "RECURSIVE CALL TO SEGMENT"彻底解决

    我们在做菜单程序或通过函数指针调用函数时,如果被调用的函数中有包含了常量字符串,那么经常会出现这样的的错误提示:"RECURSIVE CALL TO SEGMENT"意思是&quo ...