自定义toast实现

标签：web   javascript   html5   toast   

.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);

自定义toast实现

标签：web   javascript   html5   toast   

原文地址：http://blog.51cto.com/antlove/2056115