纯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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
TypeScript入门-接口
Mar 30 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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 cookie 详解使用实例
2016/11/03 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
YII框架http缓存操作示例
2019/04/29 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python中with用法讲解
2020/02/07 Python
python序列类型种类详解
2020/02/26 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python实现简单猜单词游戏
2020/12/24 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
运动会通讯稿300字
2015/07/20 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS