更新时间：2017-6-19 20:35:20
更新说明：修改toast样式,在有max-width属性的基础上添加word-wrap: break-word;让英文 和 数字 可以在宽度到达100%的时候换行
toast & showMessage
这是一个简单的提示插件 适合移动端
toast
position:如果toast创建的位置不是body的话就absolute
animateIn（上一个版本是animateStyle）:进入的动画
animateOut（上一个版本是没有，写死的fadeout）:离开的动画 现在可以使用animate的动画
padding: padding
background: 背景色
borderRadius: 圆角
duration: 定时器时间
fontSize: 字体大小
content: 提示内容
color: 文字颜色
top: bottom底部的位置 具体的数值 或者center 垂直居中
zIndex: 层级
isCenter: 是否垂直水平居中显示
closePrev: 在打开下一个toast的时候立即关闭上一个toast
$('div_toast').toast({
content:'你好啊！'
});showMessage:function(content,duration,isCenter,animateIn,animateOut){} 五个参数 content:内容,duration:时长,isCenter:是否剧中,animateIn:进入动画效果,animateOut:离开的动画效果 showMessage('未曾遗忘的青春',3000,true,'bounceIn-hastrans','bounceOut-hastrans');
showMessage('这是提示信息',5000,false,'bounceIn-hastrans','bounceOut-hastrans');注意：'-hastrans'是我在animate.css的基础上加的,目的是当元素为绝对定位又想用translate居中时候,修改translate的值无效,故做了一些修改,之前的class也可以正常使用
Metro风格的jQuery个性化消息提示插件
介绍一款Metro风格的消息提示框插件，插件是基于jQuery的，不仅拥有Metro哪种简单精巧的UI风格，而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件，比如HTML5CSS3弹出提示框，感兴趣的朋友也可以前往关注。讨论这个项目（11）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
-
好像并不会消失
-
搞错了哈，但是想问下有没有回调方法呢
-
没有回调方法，不过你可以在这个基础上改
-
在vivo手机上toast一直显示不隐藏，有什么好的解决办法么
我的解决方案如下：
function showtoastFromDiv(text) {
$('.toast_div').show();
$('.toast_div').toast({
content: text,
duration: 1000
})
setTimeout(() => {
$('.toast_div').hide();
}, 2000);
}
-
是animate.css没兼容，在网上下载个兼容的animate.css文件，不要用包里的
完全正确
// 复制本页链接
function copy_link() {
var input = $('#input_url');
input.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
showMessage('复制链接成功！', 3000, true, 'bounceInUp-hastrans', 'bounceOutDown-hastrans');
setTimeout(
function() {
$('.cpt-toast').css('display', 'none');
}, 2600);
} catch (err) {
showMessage('复制链接失败！', 3000, true, 'bounceInUp-hastrans', 'bounceOutDown-hastrans');
setTimeout(
function() {
$('.cpt-toast').css('display', 'none');
}, 2600);
}
}
代码重复了
// 复制本页链接
function copy_link() {
var input = $('#input_url');
input.select();
try {
var successful = document.execCommand('copy');
// var msg = successful ? 'successful' : 'unsuccessful';
$msg = '复制链接成功！';
} catch (err) {
$msg = '复制链接失败！';
}
showMessage($msg, 3000, true, 'bounceInUp-hastrans', 'bounceOutDown-hastrans');
setTimeout(
function() {
$('.cpt-toast').css('display', 'none');
}, 2600);
}
-
不好啊， 在body显示 会修改我自己写的css样式，
自己的样式可以写在插件的属性里面 ，如果是外部css样式 会被js里面的style样式给覆盖掉的哦
加权重是不是就可以了
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
