Contact Page Design Using Light Box

What is light box?
Light box is a box, by using this light box. All elements in web page except light box will be drop focus (i.e., light box only will get focus). The purpose of using light box is, user have only focus on that particular area. Most of the light boxes are used for facebook fan page like, email subscription and contact form.

Here we are going to implement light box using HTML, CSS and javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CREATE TABLE `freeze`.`tb` (
`id` INT( 3 ) NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 20 ) NOT NULL ,
`email` VARCHAR( 20 ) NOT NULL ,
`message` VARCHAR( 500 ) NOT NULL ,
PRIMARY KEY ( `id` )

) ENGINE = INNODB;

 

Stylesheet

z-index:  A HTML element with higher z-index will display over HTML element with lower z-index.

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
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
}
#contact {
display: none;
position: fixed;
top: 25%;
left: 30%;
width: 40%;
height: 50%;
padding: 16px;
background-color: white;
border: 5px solid #0C0;
z-index:1002;
}
#bg{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
opacity:.50;
}
#cross {
display: none;
position:absolute;
top: -40;
left: 540;
padding: 16px;
z-index:1005;
}

 

index.php

Light box code to insert data into mysql database.

In this light box, i have implemented two options to close the light box. One is close button and another is pressing ESC key. By using javascript, we can detect whether ESC key is pressed or not.

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
<?php
if(isset($_POST['submit']))
{
$query=mysql_connect('localhost','root','');
mysql_select_db("freeze",$query);
$name=$_POST['name'];
$mail=$_POST['mail'];
$msg=$_POST['msg'];
$query1=mysql_query("insert into tb values('','$name','$mail','$msg')");
if($query1)
{
echo "<script type='text/javascript'>alert('Your message has been sended')</script>";
}
}
?>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<script type="text/javascript">
window.document.onkeydown = function (e)
{
if (!e) e = event;
if (e.keyCode == 27)
{
document.getElementById('contact').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('cross').style.display='none';
}
}
</script>
</head>
<body onLoad="press()" style="height:1800px;">
<a href = "javascript:void(0)" onClick = "

document.getElementById('contact').style.display='block';
document.getElementById('bg').style.display='block';
document.getElementById('cross').style.display='block';">here</a>
<div id="contact">

<fieldset>
<form method="post" action="">
Name:<input type="text" name="name"><br />
Email: <input type="text" name="mail"><br />
Message: <br /><textarea name="msg">
</textarea>
<input type="submit" name="submit">
</form>
</fieldset>
<div id="cross">
<a href = "javascript:void(0)" onClick ="
document.getElementById('contact').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('cross').style.display='none';">
<img src="cross.png"></a>
</div>
</div>

<div id="bg"></div>
</body>
</html>

About prasad k

Prasad Kuppusamy has written 81 post in this blog.

i m php developer, web designer.

4 Responses to Contact Page Design Using Light Box

  1. jawed says:

    this is not working proper

  2. Amar says:

    its working…. Nice Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

prealliance-archiepiscopacy