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
134
135
136
137
138
139
140
141
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金魚都能懂的網頁設計入門-第二十七天 - CSS控制</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none
}
.full-screen{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
.full-screen .text{
width: 90%;
max-width: 500px;
max-height: 80%;
background: #fff;
padding: 20px;
position: relative;
}
.full-screen.x{
display:none;
}
.full-screen .btn-close{
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color:#000 ;
color: #fff;
text-decoration: none;
top: -15px;
right: -15px;
border-radius: 50%;
}
</style>
</head>
<body>
<a href="#" class="btn-open">open</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam itaque tempora aut tenetur! Aliquam rerum aut temporibus exercitationem, provident rem. Libero asperiores laboriosam culpa maiores nostrum magni at eaque officia.</p>
<p>Sapiente doloribus nisi quam, dicta aliquid cupiditate ex explicabo eius ad. Rerum, accusamus aliquid alias quasi in ratione corporis repellendus minus repudiandae maiores perspiciatis hic consequuntur sint eius recusandae voluptatem?</p>
<p>Quas commodi, laudantium est illum debitis fugit voluptatem culpa natus explicabo fugiat beatae laboriosam inventore, odit architecto, hic eos enim. Impedit officia ducimus ratione obcaecati. Provident, quod. Autem, nihil. Debitis.</p>
<p>Maiores illo voluptatem adipisci earum consectetur! Odio, cumque. Veritatis, ea. Totam reiciendis, nam tempore aperiam praesentium, adipisci doloremque possimus deserunt inventore fuga officiis maxime velit nesciunt necessitatibus fugit assumenda cum?</p>
<p>Nesciunt dignissimos accusantium quos minus cum optio corrupti ex molestiae porro, veniam iure. Illum molestias error eveniet architecto asperiores accusamus in, soluta atque sequi, eos ipsa. Quia molestias explicabo laudantium.</p>
<p>Delectus, necessitatibus odit. Perspiciatis, iusto accusamus ratione magnam nam ea eius similique nisi commodi, at architecto odio exercitationem! Ipsum quisquam cupiditate consequuntur accusantium dolore quasi voluptas porro consequatur atque commodi!</p>
<p>Et, repellat beatae. Provident nostrum adipisci obcaecati repellendus id eos expedita, in repellat iusto quos, tempore aperiam non. Ab autem pariatur voluptate tempora quo aperiam neque eos hic! Impedit, dolorum.</p>
<p>Accusamus sit, laborum aspernatur odio debitis facilis. Hic adipisci ipsam tenetur reprehenderit fugit! Provident dicta minus explicabo deserunt odio exercitationem dolores animi distinctio, sequi ex! Omnis est amet incidunt quaerat.</p>
<p>At, libero impedit. Dicta dolore minima veniam accusamus saepe quisquam nostrum, esse ex rerum adipisci quia nihil numquam? Deleniti odit quisquam maiores id laudantium repudiandae perspiciatis assumenda explicabo aliquam magnam.</p>
<p>Expedita doloribus rerum natus, eos consectetur molestias nobis ut quasi. Quis fugiat corporis quod vero sit pariatur optio quae exercitationem non, deleniti atque tempora voluptas nobis esse vitae, quidem hic.</p>
<p>Aliquid nihil amet ea, suscipit rem esse, deserunt dicta quia ipsa in, dolore placeat unde cupiditate at mollitia? Iure ad deleniti odio recusandae in officia libero saepe nostrum incidunt commodi?</p>
<p>Ad tempora distinctio accusantium, iste aperiam repellendus temporibus dignissimos inventore quam dolores culpa iure, fugit quasi ducimus sint dicta quibusdam delectus, praesentium debitis omnis provident magni fugiat magnam. Ipsam, odit.</p>
<p>Aspernatur at est, officiis nam odit, animi sequi minima nisi assumenda officia iusto quisquam similique saepe? Recusandae quisquam cupiditate quas, adipisci earum in dignissimos, omnis, aliquam numquam porro corrupti itaque!</p>
<p>Fugit beatae voluptas dignissimos itaque, molestias natus eius cupiditate quod, doloremque architecto mollitia eos facere harum qui maiores vitae sunt repudiandae hic velit ipsa, nisi eligendi aspernatur? Distinctio, repudiandae voluptatum.</p>
<p>Omnis aliquam autem suscipit aperiam labore odit magni harum inventore voluptatum perspiciatis natus dicta nam rerum dolorum eveniet tenetur ad, debitis nulla temporibus quidem pariatur, excepturi assumenda quod. Dolor, doloremque.</p>
<p>Quod cum iste, praesentium dolore delectus nobis tenetur debitis aliquid architecto quos, dolorem eligendi eum totam voluptatibus id doloribus magnam veritatis a? Quia reiciendis perferendis id placeat eum at velit.</p>
<p>Odit animi quis blanditiis commodi illum laborum id sapiente dolore sequi in, harum fugit amet culpa laboriosam adipisci ipsa necessitatibus, aliquid, corrupti obcaecati ducimus. Non sunt inventore sit perspiciatis delectus.</p>
<p>Nam doloremque pariatur illo ducimus, possimus quis quo nesciunt, perferendis expedita iure, adipisci corporis eligendi ipsa fuga aliquid quisquam tempore impedit soluta. Nisi quibusdam ut illo saepe quidem explicabo. Ullam?</p>
<p>Deleniti iste officiis voluptate? Culpa aspernatur saepe illum, accusantium eligendi ex qui! Soluta amet expedita commodi itaque quibusdam mollitia quia magni provident laboriosam vel. Rerum nam facere perspiciatis iure veniam.</p>
<p>Laboriosam voluptatum reiciendis cum aut totam inventore animi id quas deleniti aperiam in laudantium sint necessitatibus nulla, quod fuga error pariatur expedita velit ex temporibus, voluptate quos, nam modi? Ipsam.</p>
<p>Eligendi iusto hic maiores, molestias ex fugit. Recusandae placeat maxime fugiat a. Voluptates tempora consequatur, fugit quae vel aperiam repudiandae quis explicabo laborum veniam, culpa tenetur adipisci ipsum. Corrupti, odio!</p>
<p>Atque saepe sit dignissimos. Quasi quisquam repudiandae fugit esse. Sit asperiores ratione eos perferendis a neque eius facilis cupiditate, non at optio officia modi sequi voluptatem provident ex fugit ea?</p>
<p>Tenetur velit reiciendis recusandae est iusto? Quidem laudantium aperiam ad vel in. Minus sequi explicabo ad vero esse, nobis, praesentium hic aut ullam suscipit reprehenderit omnis quis dolore temporibus accusantium?</p>
<p>Laborum sint nesciunt numquam recusandae nobis neque molestias blanditiis iure. Neque nihil beatae similique magnam omnis, eius alias optio, ducimus iure quis, voluptate sapiente vitae quidem animi facilis minima culpa?</p>
<p>Et, totam! Temporibus at repellat amet nihil nisi perferendis possimus, voluptates beatae voluptas tempore totam quidem veniam, laborum esse officia voluptatem quisquam ut id voluptate nulla distinctio quaerat? Officiis, ipsa?</p>
<p>Hic quia, ut beatae facere culpa voluptates illum, quos voluptas facilis ad inventore, recusandae alias aspernatur. Fugiat, corrupti modi. Voluptates alias id ducimus totam reprehenderit laborum minima distinctio natus minus.</p>
<p>Doloremque atque alias, quasi quae ab fuga ut, minima veritatis blanditiis, mollitia nemo? Nihil nulla ea modi inventore accusantium debitis id laudantium necessitatibus! Blanditiis at ducimus et iure ipsam sunt.</p>
<p>Quaerat unde ipsam deleniti dolore? Maiores repellat eos esse dolorum nihil, fugiat officia maxime unde nesciunt. Nulla, soluta, ratione eos error optio delectus laboriosam, obcaecati velit itaque mollitia doloribus commodi.</p>
<p>Ad voluptatum quos quaerat iure ducimus consequuntur? Quaerat tempore fugit deleniti quidem optio expedita ullam et inventore libero eveniet placeat nihil rerum ipsam, dignissimos aut ut repudiandae. Blanditiis, magnam repellat.</p>
<p>Rerum officiis saepe cupiditate, fugiat accusamus distinctio minima quasi, possimus doloribus porro amet? Consequuntur facilis reiciendis, placeat provident deserunt ipsam aliquam veritatis at. Omnis nihil voluptas numquam dolores ipsa vitae?</p>
<div class="full-screen">
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rem deserunt consectetur optio ex, sunt fugit inventore culpa esse vel asperiores cupiditate commodi ullam voluptatum magnam maxime, nobis harum ipsam!
<a href="#" class="btn-close">X</a>
</div>
</div>
<script src="./jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(
function(){
$('.btn-close').click(
function(){
$('.full-screen').addClass('x');
}
)
$('.btn-open').click(
function(){
$('.full-screen').removeClass('x');
}
)
})
</script>
</body>
</html>
|
