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>
2 Responses to Contact Page Design Using Light Box
Leave a Reply
this is not working proper
‘
can i know what is the problem?