基于jquery的Toast

发表于 | 更新于

基于jquery的Toast 

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(function ($, win) {
  var style = document.createElement('style');
  var toastDiv = document.createElement(('div'));
  toastDiv.className = 'toast';
  style.innerHTML = '.toast {
' +
    '  position: fixed;
' +
    '  left: 50%;
' +
    '  top: 50%;
' +
    '  text-align: center;
' +
    '  max-width: 300px;
' +
    '  line-height: 20px;
' +
    '  vertical-align: middle;
' +
    '  vertical-align: auto;
' +
    '  zoom: 1;
' +
    '  transition: all 0.3s ease;
' +
    '  font-family: '微软雅黑','Microsoft Yahei';
' +
    '  -moz-user-select: -moz-none;
' +
    '  -ms-user-select: none;
' +
    '  -webkit-user-select: none;
' +
    '  user-select: none;
' +
    '  word-wrap: break-word;
' +
    '  padding: 10px 20px;
' +
    '  background: rgba(7,17,27,0.66);
' +
    '  background-radius: 6px;
' +
    '  color: white;
' +
    '  -webkit-transform: translate3d(-50%,-50%,0);
' +
    '  -moz-transform: translate3d(-50%,-50%,0);
' +
    '  transform: translate3d(-50%,-50%,0);
' +
    '  display: none;' +
    '}';
  document.getElementsByTagName('head')[0].appendChild(style);
  document.body.appendChild(toastDiv);
  win.toast = function(content, time) {
    time = time || 2000;
    if (win.toastTimer) clearTimeout(win.toastTimer);
    $(toastDiv).html(content);
    $(toastDiv).show();
    win.toastTimer = setTimeout(function () {
      $(toastDiv).fadeOut();
    }, time)
  }
})($, window);