为了账号安全,请及时绑定邮箱和手机立即绑定

自定义toast实现

标签:
Html/CSS

ys_toast.css

.ys-toast{	position:fixed;	left:0;	right:0;	top:0;	bottom:0;	z-index: 999999;}.ys-toast>em{	position:absolute;	line-height: 24px;	text-align: center;	border-radius:12px;	background-color:#000;	color:#fff;	margin:auto;	opacity:0;	font-size:16px;	transition: opacity 0.5s;	-moz-transition: opacity 0.5s; /* Firefox 4 */	-webkit-transition: opacity 0.5s; /* Safari 和 Chrome */	-o-transition: opacity 0.5s; /* Opera */	padding:14px 20px;}.ys-toast.ys-toast-show>em{	opacity:1;}


ys_toast.js

(function($){		var clientWidth = $(window).width();	var maxWidth = clientWidth-60;	function createToast(msg){		return $("<div class='ys-toast' style='display:none!important;'><em>"+msg+"</em></div>");	}    $.toast = function(msg,duration){    	var duration = duration||1500;        var $toast = createToast(msg).appendTo("html");        $toast.show();        $toast.find("em").css("max-width",maxWidth+"px");        var width = parseInt($toast.find("em").css("width"))+1;        $toast.find("em").css("width",width+"px");        var height = parseInt($toast.find("em").css("height"));        $toast.find("em").css({        	left:0,        	right:0,        	top:0,        	bottom:0,        	height:height+"px",        });                $toast.addClass("ys-toast-show");        setTimeout(function(){			$toast.removeClass("ys-toast-show");        },duration);        $toast.on("webkitTransitionEnd transitionend",function(){        	if(!$toast.hasClass("ys-toast-show")){				$toast.remove();        	}        });    };})(jQuery);


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消