Modal - Pure CSS

gravatar
CSS 2/3, Modal-Pure CSS
Snippet by Anon
2321 0
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
<div class="wrap">
<h1>Modal - Pure CSS</h1>
<p>Example of modal just in CSS. I use the pseudo selector ":target" for modal action.</p>
<p>This works in IE9+ and all modern browsers.</p>
<p>View <a href="http://www.felipefialho.com/css-components/">Pure CSS Components</a> project.</p>
<hr />
<a href="#modal-one" class="btn btn-big">Modal!</a>
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
<a href="#" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Nice!</a>
</div>
</div>
</div>
<!-- /Modal -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body {
color: #333;
font-family: 'Helvetica', arial;
}
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX