纯JavaScript基于notie.js插件实现消息提示特效


Posted in Javascript onJanuary 18, 2016

本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下

效果图:

纯JavaScript基于notie.js插件实现消息提示特效

实现的代码:
html代码:

<br><br><br><br><br><br>
  <article class="zzsc">
    <div class="div-ext">
      <div class="div-int">
 
        <span>Test notie with these buttons:</span>
        <br>
        <button onclick="success();">Success</button>
        <button onclick="warning();">Warning</button>
        <button onclick="error();">Error</button><br>
        <button onclick="info();">Information</button>
        <button onclick="confirm();">Confirm</button>
        <button onclick="input();">Input</button>
        <br>
 
 
      </div>
    </div>
  </article>

js代码:

function success() {
      notie.alert(1, 'Success!', 2);
    }
 
    function warning() {
      notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
    }
 
    function error() {
      notie.alert(3, 'Error.', 2);
    }
 
    function info() {
      notie.alert(4, 'Information.', 2);
    }
 
    function confirm() {
      notie.confirm('Are you sure you want to do that?<br><b>That\'s a bold move...</b>', 'Yes', 'Cancel', function () {
        notie.alert(1, 'Good choice!', 2);
      });
    }
 
    function input() {
      notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function (value_entered) {
        notie.alert(1, 'You entered: ' + value_entered, 2);
      });
    }

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 #Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 #Javascript
深入学习jQuery Validate表单验证
Jan 18 #Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 #Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 #Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
You might like
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Django--权限Permissions的例子
2019/08/28 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python入门之井字棋小游戏
2020/03/05 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers