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