js 三种经常用到的消息通知弹窗

1.  alert 消息提醒弹窗,特点: 不期望得到交互

2.  confirm 确认某种消息. 得到true false 的回复

3. prompt 问答窗口, 提出问题,并且会得到答案

    这个经常会做一些限制(js的length 类似于mb_strlen(str, 'utf8')) eg:   

// check reason
var reason = prompt('请填写切换通道的理由');
if (!reason) {
    return false;
}

reason = reason.trim();
if (reason.length  === 0) {
    return false;
}

if (reason.length > 200) {
    alert('理由长度超过限制, 请保持在200以内');
    return false;
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
spop.js是一款纯js toast消息提示通知插件。通过spop.js插件,你可以快速的在网页上制作出漂亮的toast消息提示效果。该js toast消息提示插件的特点还有: 内置4种主题样式:default, success, warning, error。 toast可以显示在屏幕的6个位置:top-left, top-center, top-right, bottom-left, bottom-center, bottom-right。 可以对消息提示进行编组。 提供打开和关闭消息提示时的回调函数。 支持HTML内容。 使用方法 在页面中引入spop.css和spop.js文件。 <link rel="stylesheet" type="text/css" href="./css/spop.css"> [removed][removed] 初始化toast 该js toast消息提示插件最基本的使用方法如下: spop('Default SmallPop'); spop('<h4 class="spop-title">Success</h4>I´m a success SmallPop', 'success'); spop('<strong>Warning pop</strong>', 'warning'); spop('<strong>Error Here!</strong>', 'error'); 分组 可以对消息进行分组,分组后的消息每次只显示一条。 spop({ template: 'All fields are required!', group: 'submit-satus', style: 'error' }); spop({ template: 'Your information has been submitted', group: 'submit-satus', style: 'success' autoclose: 2000 }); 回调函数 在toast消息提示打开和关闭时都可以使用回调函数。 spop({ template: 'Please, close me.', onOpen: function () { document.body.style.background = "#fff"; }, onClose: function() { document.body.style.background = ""; spop({ template: 'Thank you!', style: 'success', autoclose: 2000 }); } }); 配置参数 spop.js消息提示插件的可用配置参数如下: spop({ template : null,// string required. Without it nothing happens! style : 'info',// success, warning or error autoclose : false,// miliseconds position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right icon : true,// or false group : false,// string, add a id reference onOpen : funtion() { }, onClose : funtion() { } }); template :消息提示的模板。可以是一个字符串,或这是HTML代码。 style :toast消息提示的主题样式,可以是info,success, warning 或 error。 autoclose :是否自动关闭。 position :toast消息提示的位置。可以是:top-right,top-left,top-center,bottom-left,bottom-center或bottom-right。 icon :是否显示图标。 group :是否对消息进行分组。 onOpen :toast消息提示打开时的回调函数。 onClose :toast消息提示关闭时的回调函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值