之前使用的tip提示样本都是模版自带的,但并不是每套模版都会自带提示起泡的,好在Jquery足够吸引,有很多插件可以使用。

这里采用ohsnap提示插件:)小样:

tips

 

看起来还是蛮赞的!

如果想使用,OK  Go on:
1.首先它是依赖Jquery的,

那么依赖引入cdn没啥压力吧:

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

引入 ohsnap的js文件

<script src="https://rawgithub.com/justindomingue/ohSnap/master/ohsnap.js" type="text/javascript" charset="utf-8"></script>

然后在你的页面中建立一个div作为提示:

<div id="ohsnap"></div>

那么接下来你来美化这个div和提示的样子吧:在你的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
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
/*ohSnap 提示插件*/
 
/* Oh Snap */
 
#ohsnap {
  position: fixed;
  bottom: 5px;
  right:5px;
  margin-left: 5px;
  z-index:99;
}
 
.alert {
  text-align: right;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
  float: right;
  clear: right;
}
 
.alert-red {
  color: white;
  background-color: #DA4453;
}
.alert-green {
  color: white;
  background-color: #37BC9B;
}
.alert-blue {
  color: white;
  background-color: #4A89DC;
}
.alert-yellow {
  color: white;
  background-color: #F6BB42;
}
.alert-orange {
  color:white;
  background-color: #E9573F;
}
 
.buttons {
  margin-bottom: 20px;
  display: block;
}
 
.buttons a {
  margin:auto;
  margin-bottom:10px;
  float: none !important;
  text-align: center;
 
}
 
.buttons a span { 
  padding-left: 0px; 
}
 
#ohsnap { text-shadow: none; }
@media (max-width: 450px) {
  .buttons {
    margin-bottom: 334px;
  }
}

使用的样子如:
ohSnap('Oh Snap! You can\'t access this page!', 'red');
ohSnap('Ahh Yeah! Your account was created.', 'green');
ohSnap('We are closed right now. Come back tomorrow.', 'blue');
ohSnap('A yellow alert for your... yellow needs...', 'yellow');
ohSnap('Free for all!', 'orange');