I want this form as lightbox form.
Is it possible.

<form action="lims_updated_north.php" method="post">
<table class="mytable" align="center">
<tr>
<td>Code</td>
<td>
<input type="text" name="al" id="al" value="<?php echo $al; ?>" /> </td>

<td>Owner Name</td>
<td>
<input type="text" name="cd" id="cd" value="<?php echo $cd; ?>" /> </td></tr>
<tr>
<td>Mobile</td>
<td>
<input type="text" name="nid" id="nid" value="<?php echo $nid; ?>" /> </td>

<td>Landline</td>
<td>
<input type="text" name="lg" id="lg" value="<?php echo $lg; ?>" /> </td></tr>
<tr>
<td>LAD</td>
<td>
<input type="text" name="lt" id="lt" value="<?php echo $lt; ?>" /> </td>

<td>POD</td>
<td>
<input type="text" name="ad" id="ad" value="<?php echo $ad; ?>" /> </td></tr>
<tr>
<td>LA Start Date</td>
<td>
<input type="text" name="rg" id="rg" value="<?php echo $rg; ?>" /> </td>

<td>LA End Date</td>
<td>
<input type="text" name="ct" id="ct" value="<?php echo $ct; ?>" /> </td></tr>
<tr>
<td>PO Start Date</td>
<td>
<input type="text" name="dt" id="dt" value="<?php echo $dt; ?>" /> </td>

<td>PO End Date</td>
<td>
<input type="text" name="mb" id="mb" value="<?php echo $mb; ?>" /> </td></tr>
<tr>
<td>Bank Account No</td>
<td>
<input type="text" name="snp" id="snp" value="<?php echo $snp; ?>" /> </td>



<td colspan="2">
<input type="submit" style="width: 200px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-left:100px;
	background: transparent url(/images/sims_update_button.jpg) no-repeat 0 0;" value=""/>

Recommended Answers

All 6 Replies

There are 2 options:

>> You can either search for a script using Google
>> Or make your own lightbox script, it justs needs to do the following things:
--------> Center the div in which the form stands (you can ofcourse make the div look good)
--------> Change the transparancy of the page behind the div (See the w3schools reference)

~G

I search in google but did not find a single solution

Please guide

"Light box" is just a fancy name for a popup div and a backgound which opacity (or transparancy) is lowered. I made a small example for you to try out and see how it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style1.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#FullScreen {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
opacity:0.7;
filter:alpha(opacity=70);
background-color:black;
border:0px solid red;
display:none;
}
#LightBox {
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
border:3px solid #A4A4A4;
background-color:#E4E4E4;
padding:10px;
z-index:1;
}
#LightBoxMenu {
text-align:right;
}
</style>
<script type="text/javascript">
/*
 * Script created by Graphix
 * You can modify this script to your own likings, but please do not remove this warranty.
 * Contact: either PM me at DaniWeb or visit http://www.symbolwebdesign.nl
*/
function OpenLightBox() {
		document.getElementById("LightBox").style.display = "inline";
		document.getElementById("FullScreen").style.display = "inline";
}
function CloseLightBox() {
		document.getElementById("LightBox").style.display = "none";
		document.getElementById("FullScreen").style.display = "none";
}
</script>
<title>Lightbox Example</title>
</head>
<body>
<div id="LightBox">
 <div id="LightBoxMenu">
  <a href="#" onclick='CloseLightBox(); return false;'>[X] Close</a>
 </div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ligula arcu, ut dapibus tellus. Suspendisse malesuada gravida ante facilisis euismod. Mauris dignissim pulvinar arcu eu aliquet. Duis nec nibh nisi, nec sagittis magna. Duis ipsum nibh, aliquam ut tristique at, dictum vitae ipsum. Proin pretium ultrices libero eu mattis. Etiam felis augue, dapibus in gravida ut, gravida sit amet diam. Quisque ac orci id eros varius bibendum. Suspendisse a pretium tortor. Nunc tincidunt pulvinar orci, eu aliquam massa ullamcorper eu. Fusce pellentesque posuere vehicula. Phasellus eget nisl pellentesque mauris fermentum laoreet a vel dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Curabitur condimentum justo id diam dictum at ultricies augue hendrerit. Sed ac justo nisi. Etiam laoreet felis vitae mi placerat blandit.
 <br /><br />
 Vivamus sit amet mattis massa. Aenean feugiat ipsum ac sem dictum fermentum. Duis dapibus tellus vitae tellus vulputate luctus. Cras laoreet iaculis magna, ut tincidunt nibh viverra eu. Duis malesuada odio at lacus condimentum et venenatis diam dictum. Sed at tortor diam. Morbi pellentesque erat ac mi tincidunt posuere. Donec nec arcu quis augue faucibus mollis vel ut est. Pellentesque metus augue, varius non placerat id, bibendum vitae sem. Pellentesque mi quam, bibendum quis elementum at, iaculis vitae orci.
</div>
</div>
<div id="FullScreen"></div>
<a href="#" onclick='OpenLightBox(); return false;'>Click here to open the lightbox!</a>
 This is the page.... Some text:
 <br /><br />
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ligula arcu, ut dapibus tellus. Suspendisse malesuada gravida ante facilisis euismod. Mauris dignissim pulvinar arcu eu aliquet. Duis nec nibh nisi, nec sagittis magna. Duis ipsum nibh, aliquam ut tristique at, dictum vitae ipsum. Proin pretium ultrices libero eu mattis. Etiam felis augue, dapibus in gravida ut, gravida sit amet diam. Quisque ac orci id eros varius bibendum. Suspendisse a pretium tortor. Nunc tincidunt pulvinar orci, eu aliquam massa ullamcorper eu. Fusce pellentesque posuere vehicula. Phasellus eget nisl pellentesque mauris fermentum laoreet a vel dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Curabitur condimentum justo id diam dictum at ultricies augue hendrerit. Sed ac justo nisi. Etiam laoreet felis vitae mi placerat blandit.
 <br /><br />
 Vivamus sit amet mattis massa. Aenean feugiat ipsum ac sem dictum fermentum. Duis dapibus tellus vitae tellus vulputate luctus. Cras laoreet iaculis magna, ut tincidunt nibh viverra eu. Duis malesuada odio at lacus condimentum et venenatis diam dictum. Sed at tortor diam. Morbi pellentesque erat ac mi tincidunt posuere. Donec nec arcu quis augue faucibus mollis vel ut est. Pellentesque metus augue, varius non placerat id, bibendum vitae sem. Pellentesque mi quam, bibendum quis elementum at, iaculis vitae orci.
 <br /><br />
 Mauris sagittis placerat feugiat. Fusce nibh nulla, vestibulum vitae laoreet ut, auctor in turpis. Morbi a est ut tortor auctor luctus. Vestibulum at diam vel quam interdum varius eu ac ipsum. Suspendisse potenti. Aliquam vehicula aliquet placerat. Nunc tincidunt iaculis sodales. Nam vel felis eu ante volutpat vulputate eu vitae mauris. Vestibulum vel ante eu massa tristique aliquam at ut tellus. Vivamus venenatis nulla vitae felis laoreet a rutrum velit faucibus. Nulla at massa at quam congue viverra et sed ante. Morbi facilisis erat vitae nunc elementum nec malesuada augue ullamcorper. Ut vel nisi in quam blandit fringilla.
 <br /><br />
 Nam id laoreet tortor. Nullam dapibus pretium nibh, scelerisque luctus sapien pretium non. Sed velit risus, placerat vel pretium nec, semper id lacus. Vestibulum ut magna lorem, in vehicula neque. Nullam rhoncus convallis gravida. Proin est nulla, pulvinar eu varius in, dignissim in tortor. Integer nisl risus, pharetra in elementum a, consectetur quis risus. In eget risus quis diam pretium hendrerit id lobortis ligula. Aliquam vel sapien a enim malesuada ultrices. Fusce adipiscing ornare dolor, et malesuada tellus cursus lobortis. Vivamus viverra orci eget neque iaculis vestibulum. Sed ante nunc, dignissim at facilisis vehicula, mollis nec arcu. Praesent sit amet eros vel quam facilisis imperdiet. Sed imperdiet, tortor eget tempus eleifend, nisl leo dapibus lectus, eget ornare augue lectus in magna. Suspendisse porttitor ullamcorper tortor id vulputate. Etiam erat leo, elementum ac auctor id, porta ac nulla. Vestibulum quis sem massa.
 <br /><br />
 Ut accumsan scelerisque libero ac feugiat. Vivamus a tempor purus. Donec vehicula rhoncus ultrices. Maecenas quis massa mauris, eu ullamcorper leo. Vivamus diam orci, euismod in commodo a, tristique in purus. Vivamus sed magna sit amet velit cursus varius. Sed faucibus porta nunc, vel laoreet metus auctor id. Etiam feugiat felis ultrices felis rutrum ac rutrum velit eleifend. Donec vel fermentum purus. Nulla et elit vitae nibh vestibulum interdum ac sed nunc. Nunc a nisi tellus, sit amet mattis elit. Nullam vitae elit ligula, pulvinar lobortis ligula. In hac habitasse platea dictumst. Proin fringilla blandit nibh auctor bibendum. Phasellus adipiscing, quam vel condimentum dignissim, libero arcu tincidunt felis, sed bibendum tortor metus at est. Curabitur eget lectus elementum lorem adipiscing mollis vitae ut sapien. Duis molestie lacus sed ligula bibendum vel venenatis ante placerat. Proin vitae arcu massa, sit amet hendrerit odio. Pellentesque enim lorem, adipiscing eget mattis eget, accumsan id massa. 
 <br />
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ligula arcu, ut dapibus tellus. Suspendisse malesuada gravida ante facilisis euismod. Mauris dignissim pulvinar arcu eu aliquet. Duis nec nibh nisi, nec sagittis magna. Duis ipsum nibh, aliquam ut tristique at, dictum vitae ipsum. Proin pretium ultrices libero eu mattis. Etiam felis augue, dapibus in gravida ut, gravida sit amet diam. Quisque ac orci id eros varius bibendum. Suspendisse a pretium tortor. Nunc tincidunt pulvinar orci, eu aliquam massa ullamcorper eu. Fusce pellentesque posuere vehicula. Phasellus eget nisl pellentesque mauris fermentum laoreet a vel dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Curabitur condimentum justo id diam dictum at ultricies augue hendrerit. Sed ac justo nisi. Etiam laoreet felis vitae mi placerat blandit.
 <br /><br />
 Vivamus sit amet mattis massa. Aenean feugiat ipsum ac sem dictum fermentum. Duis dapibus tellus vitae tellus vulputate luctus. Cras laoreet iaculis magna, ut tincidunt nibh viverra eu. Duis malesuada odio at lacus condimentum et venenatis diam dictum. Sed at tortor diam. Morbi pellentesque erat ac mi tincidunt posuere. Donec nec arcu quis augue faucibus mollis vel ut est. Pellentesque metus augue, varius non placerat id, bibendum vitae sem. Pellentesque mi quam, bibendum quis elementum at, iaculis vitae orci.
 <br /><br />
 Mauris sagittis placerat feugiat. Fusce nibh nulla, vestibulum vitae laoreet ut, auctor in turpis. Morbi a est ut tortor auctor luctus. Vestibulum at diam vel quam interdum varius eu ac ipsum. Suspendisse potenti. Aliquam vehicula aliquet placerat. Nunc tincidunt iaculis sodales. Nam vel felis eu ante volutpat vulputate eu vitae mauris. Vestibulum vel ante eu massa tristique aliquam at ut tellus. Vivamus venenatis nulla vitae felis laoreet a rutrum velit faucibus. Nulla at massa at quam congue viverra et sed ante. Morbi facilisis erat vitae nunc elementum nec malesuada augue ullamcorper. Ut vel nisi in quam blandit fringilla.
 <br /><br />
</body>
</html>

~G

Very nice Example...
How to animate like lightbox??

You can adjust the OpenLightBox() and CloseLightBox() functions, so that they open and close the in steps. Then the LightBox div ofcourse needs to have a absolute width and height. You can use SetTimeOut() to increase/decrease the width and height in steps untill the max height/width is reached.

Ofcourse you need to write 2 functions: Increase(dimension) and Decrease(dimension). The parameter dimesion can either be "height" or "width", and the max height/width need to be set as global (declared outside the functions). The amount of pixels added each time and what the interval is can be changed.

This is what my approach would be, but there are ofcourse various ways on how to do this.

~G

PS: This sounds like a pretty advanced script, so if you need any help, just ask.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.