Form In Light Box
This a first post to my blog. it was a bit interesting so just wanted to share….
This is an example of a form that opens in form of LightBox.
Its a simple form that can be changed/ replaced with what you like.
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
function retrieve()
{
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
mail = unescape(temp[1]);
temp = parameters[1].split("=");
sex = unescape(temp[1]);
temp = parameters[2].split("=");
city = unescape(temp[1]);
var data = document.getElementById("data");
data.innerHTML = "Email: " + mail + "<brr";
data.innerHTML += "Genre: " + sex + "<br>";
data.innerHTML += "City: " + city + "<br>";
}
retrieve();
About the code in the page of the form, it is the same as the code previously used, except that the dynamic filling part is removed. This gives a simplified openbox function.
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
function openbox(formtitle, fadin)
{
var box = document.getElementById('box');
document.getElementById('filter').style.display='block';
var btitle = document.getElementById('boxtitle');
btitle.innerHTML = formtitle;
if(fadin)
{
gradient("box", 0);
fadein("box");
}
else
{
box.style.display='block';
}
}
We can see that the function as a parameter for the title of the form, and the fadin option, its value is 1 if you ask a fade, and 0 if the display must be immediate.
The function closebox is now associated to the “cancel” button:
1
<input onclick="closebox()" name="cancel" type="button" value="Cancel" />
The CSS is the same with the deletion of some descriptors. Indeed, the code to insert a box in a page is simpler:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<div id="filter"></div>
<div id="box"></box>
<span id="boxtitle"></span>
<form method="GET" action="lightbox-form-test.html" >
... objects of the form...
</form>
</div>
</div>
- See the demonstration of a form in a lightbox.
- The CSS code.
- The JavaScript code of the demo.
- Load the page to which data are sent to see the source code.
- Download the full archive of the demo.
