使用css中的target属性制作弹出框

2019年02月13日作者: 国瑞个人博客 560次浏览

target在英语中代码的是目标的意思，在css中代表的是目标对象的意思，他的作用就是：
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
当我们知道它的这些属性之后，就可以用来做一些事情了，例如做一个可以点击弹出和关闭的弹出框，详细代码如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用target模仿js中的点击弹出隐藏效果-国瑞前端</title>
<style type="text/css">
body,html{
width: 100%;height: 100%;
}
* {
padding: 0;margin: 0;
box-sizing: border-box;
transition: all ease-out .4s;
text-decoration: none;
}
a.btn {
position: relative;z-index: 6;
display: block;
width: 100px; height: 46px;
text-align: center; line-height: 46px;
margin: auto;
background: #333;
border-radius: 6px;
color: #fff;
}
.wrap {
position: relative;
top: -46px;
width: 100%;height: 100%;
background: rgba(0, 0, 0, .5);
}
.box {
position: absolute;
top: 50%;left: 50%;
width: 400px;
margin-left: -200px;margin-top: -200px;
text-align: left;
overflow: hidden;
border-radius: 10px;
}
.box h1 {
padding: 30px;
background-color:#1ED34E ;
color: #eee;
}
.box p {
padding: 10px 30px;
background: #ddd;
}
.box h3 {
padding: 20px 30px;
background-color:#1ED34E ;
color: #ccc;
}
.box a {
position: absolute;
top: 8%; right: 5%;
display: block;
width: 30px; height: 30px;
background: #eee;
color: #111;
border-radius: 50%;
text-align: center;line-height: 30px;
}
.box a:hover {
transform: rotate(360deg);
background: #333;
color: #eee;
}

#wrap {
opacity: 0;
/* width: 0; */
/* height: 0; */
}
#wrap:target {z-index: 66; /* 处理层次关系 */
opacity: 1;
/* width: 100%; */
/* height: 100%; */
}
#wrap .box{
left: -50%;
/* width: 100%; */
/* height: 100%; */
}
#wrap:target .box{
left: 50%;
/* width: 100%; */
/* height: 100%; */
}
</style>
</head>
<body>
<a href="#wrap" class="btn">Open Box</a>
<div class="wrap" id="wrap">
<div class="box">
<h1>Hello</h1>
<p>Some Text</p>
<p>Some Text</p>
<h3>Box Footer</h3>
<a href="#">X</a>
</div>
</div>
</body>
</html>