Advertisemen
This video will show you guys how to make a very simple lightbox for your website using HTML5, CSS, Javascript without using any plugins.
It is very simple to do.
This is the code used in above example. You can do copy and paste these codes ---
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #lightBoxBg{
8 position: absolute;
9 top: 0px;
10 left: 0px;
11 opacity: 0.5;
12 display: none;
13 background-color: #000000;
14 height: 100%;
15 width: 100%;
16 }
17
18 #lightBox{
19 position: absolute;
20 top: 25%;
21 left: 40%;
22 display: none;
23 }
24 </style>
25 <script>
26 function startLightBox(){
27 var lbBg = document.getElementById("lightBoxBg");
28 var lb = document.getElementById("lightBox");
29
30 lbBg.style.display = "block";
31 lb.style.display = "block";
32 }
33
34 function dismiss(){
35 var lbBg = document.getElementById("lightBoxBg");
36 var lb = document.getElementById("lightBox");
37 lbBg.style.display = "none";
38 lb.style.display = " none";
39 }
40 </script>
41 </head>
42 <body>
43 <div id="lightBoxBg" onclick="dismiss()">
44
45 </div>
46 <div id="lightBox">
47 <img src="bird.jpg"/>
48 </div>
49 <button onclick="startLightBox()">Light Box</button>
50 </body>
51 </html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #lightBoxBg{
8 position: absolute;
9 top: 0px;
10 left: 0px;
11 opacity: 0.5;
12 display: none;
13 background-color: #000000;
14 height: 100%;
15 width: 100%;
16 }
17
18 #lightBox{
19 position: absolute;
20 top: 25%;
21 left: 40%;
22 display: none;
23 }
24 </style>
25 <script>
26 function startLightBox(){
27 var lbBg = document.getElementById("lightBoxBg");
28 var lb = document.getElementById("lightBox");
29
30 lbBg.style.display = "block";
31 lb.style.display = "block";
32 }
33
34 function dismiss(){
35 var lbBg = document.getElementById("lightBoxBg");
36 var lb = document.getElementById("lightBox");
37 lbBg.style.display = "none";
38 lb.style.display = " none";
39 }
40 </script>
41 </head>
42 <body>
43 <div id="lightBoxBg" onclick="dismiss()">
44
45 </div>
46 <div id="lightBox">
47 <img src="bird.jpg"/>
48 </div>
49 <button onclick="startLightBox()">Light Box</button>
50 </body>
51 </html>
Advertisemen
Tidak ada komentar:
Posting Komentar