Código de JavaScript - Modal Light Box JavaScript

Imágen de perfil
Val: 1.523
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Modal Light Box JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 22 de Septiembre del 2017 por Scriptshow (137 códigos) (Publicado el 25 de Mayo del 2017)
2.528 visualizaciones desde el 25 de Mayo del 2017
Utilizar JavaScript y Css nativo para construir un Modal Light Box. Por tanto, es un código fácil de entender y adaptar a cualquier proyecto.
No precisa librerías, frameworks, etc. de terceros.

Espero sea útil.

Requerimientos

Un navegador o dispositivo compatible.

1.0
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 26 de Septiembre del 2017 (Publicado el 25 de Mayo del 2017)gráfica de visualizaciones de la versión: 1.0
2.529 visualizaciones desde el 25 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Versión 1.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<style>
* {
font:normal 24px/1.0 sans-serif;
transition:all .4s;
}
.over {
top:0;
left:0;
width:100%;
height:000;
position:fixed;
overflow:hidden;
background:#000000;
color:#FFFFFF;
z-index:4;
filter:alpha(opacity=80);
-khtml-opacity:0.80;
-moz-opacity:0.80;
opacity:0.80;
}
p {
padding: 0px 16px;
}
</style>
<script>
function open_() {
document.getElementById("over").style.height="100%";
}
function close_() {
document.getElementById("over").style.height="000%";
}
</script>
</head>
<body>
<div id="over" class="over">
<p style="cursor:pointer" align="right" onclick="close_()">Click aquí ...</p>
<p align="left">Texto a la Izquierda . . .</p>
<p align="center">Texto centrado . . .</p>
<p align="center">Texto centrado . . .</p>
<p align="right">Texto a la derecha . . .</p>
</div>
<p style="cursor:pointer" align="left" onclick="open_()">Click aquí ...</p>
</body>
</html>



Comentarios sobre la versión: 1.0 (2)

Imágen de perfil
25 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Excelente!!!
Responder
Imágen de perfil
26 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Tremendo aporte, mil gracias
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4005