Modal-Lightbox ampliable en CSS Nativo
Publicado por ScriptShow (125 intervenciones) el 03/12/2022 21:29:49
Saludos,
este código en CSS, permite que cualquier enlace definido, lance una capa con el contenido correspondiente.
Es adaptable con facilidad a proyectos diversos. Una Class CSS le dá forma y estilo a las capas, sín límite. El ID de cada capa la identifica como única. En el ejemplo se puede comprobar que no precisa JavaScript.
Espero sea útil.
este código en CSS, permite que cualquier enlace definido, lance una capa con el contenido correspondiente.
Es adaptable con facilidad a proyectos diversos. Una Class CSS le dá forma y estilo a las capas, sín límite. El ID de cada capa la identifica como única. En el ejemplo se puede comprobar que no precisa JavaScript.
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
<!DOCTYPE html>
<html>
<title>Modal CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
/*// ====================================// ScriptShow Web © 2000 - 2020// Experiments by 2K code © 2000 - 2020// ====================================*/* {
border: 0px;box-sizing: border-box;
transition: all .8 ease;
font-family: "Raleway", sans-serif;
}.modal {
top: 0px;left: 0px;width: 100%;
height: 100%;
padding: 24px;display: none;color: #FFFFFF;
overflow: auto;position: fixed;font-size: 28px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
}.modal:target {
display: block;position: absolute;}.close {
float: right;color: #FFFFFF;
font-size: 28px;
text-decoration: none;
}</style>
</head>
<body>
<a href="#md01">Modal 01</a>
<div id="md01" class="modal">
<a href="#" class="close">x</a>
<h2>Modal Header 01</h2>
<p>Text of Modal 01, etc...</p>
</div>
<a href="#md02">Modal 02</a>
<div id="md02" class="modal">
<a href="#" class="close">x</a>
<h2>Modal Header 02</h2>
<p>Text of Modal 02, etc...</p>
</div>
</body>
</html>
Espero sea útil.
Valora esta pregunta
0