-
Notifications
You must be signed in to change notification settings - Fork 26
/
tip浮层.html
133 lines (115 loc) · 3.16 KB
/
tip浮层.html
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>tip浮层</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>
<style>
.tips {
position: absolute;
width: 180px;
height: 50px;
top: 10px;
left:50px;
padding: 6px 10px 5px;
*padding: 7px 10px 4px;
line-height: 16px;
color: #ffffff;
font-size: 12px;
background-color: #000000;
opacity: 0.7;
filter:Alpha(opacity=70);
border: solid 1px #000000;
border-radius: 2px;
box-shadow: 0 0 3px #000000;
}
.tip-arrow {
top: -6px;
height: 80px;
position: absolute;
overflow: hidden;
font-style: normal;
font-family: simsun;
font-size: 12px;
text-shadow:0 0 2px #000;
}
/*为小菱形添加样式*/
.tip-arrow em {
position: absolute;
left: 0;
/*改变top或bottom就能改变小箭头的上下位置，左右同理此处省*/
/*top: -2px;*/
bottom: 4px;
color: #000000;
opacity: 0.5;
font-style: normal;
}
.text{
margin-top:22px;
}
.cancel {
float: right;
margin-right: 5px;
margin-top: 5px;
color: #FF6A6A;
cursor:pointer;
}
.block {
display: block;
margin-top: 60px;
margin-left: 50px;
}
</style>
<body>
哈哈哈哈哈哈，我是背景
<div class="tips">
<span class="tip-arrow tip-arrow-top">
<em>◆</em>
<div class="text">
可根据您的喜好，快速筛选商品。
</div>
<div class="cancel">我知道了</div>
</span>
</div>
<span class="block">漂浮在我上面</span>
<script>
//除了chrome之外FF甚至IE都能正确运行，（google不支持本地cookie）事实证明，本地情况下chrome是写不进去cookie的但是在有域名的情况下就可以写进去..
$(document).ready(function(){
var str = $.cookie('user');
if(str!='adCookie'){
$('.tips').show();
}
if (str=='adCookie'){
$('.tips').hide();
}
$('.cancel').click(function(){
$('.tips').hide();
$.cookie('user','adCookie',{path:'/',expires:7});
console.log($.cookie('user','adCookie',{path:'/',expires:7}));
console.log($.cookie('user'));
});
})
/*
$(document).ready(function(){
function writeCookie(){
cookie = document.cookie;
reg = /(^| )USERID=([^;]*)(;|\x24)/;
userid = reg.exec(cookie)&®.exec(cookie)[2];
}
$('.cancel').click(function(){
writeCookie();
$('.tips').hide();
})
if(document.cookie!=''){
console.log('have cookie');
$('.tips').hide();
}else{
console.log('no cookie');
$('.tips').show();
}
})*/
</script>
</body>
</html>