纯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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
在Vue中使用Compass的方法
2018/03/02 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
Python logging模块学习笔记
2014/05/24 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python实现简单飞行棋
2020/02/06 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
单位人事专员介绍信
2014/01/11 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
庆祝教师节主持词
2015/07/06 职场文书
离职告别感言
2015/08/04 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python