ys_toast.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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.5 s;
     -moz-transition: opacity  0.5 s;  /* Firefox 4 */
     -webkit-transition: opacity  0.5 s;  /* Safari 和 Chrome */
     -o-transition: opacity  0.5 s;  /* Opera */
     padding : 14px  20px ;
}
 
.ys-toast.ys-toast- show >em{
     opacity: 1 ;
}


ys_toast.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
( 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);