Using Lightbox in popup

JavaScript
1

hey folks,
i been working with lightbox for galleries on websites, i saw on many sides. that a part of form asking your email address/loading a small form type thing for inputing/submitting data. now i m working on a web site which got pop up. i want them to open in lightbox. how can i do that? is it possible?

2

Hey, was away on a long weekend, so only got to your response a few minutes ago. You will find below a very simple code example that does more or less what you are describing:

<html>
<head>
<style>
input#showBox {
position:relative;
top:10px;
left:20px;
}

div#lightbox {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:hidden;
display:none;
}

div#lightbox div#lightbox_bg {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000000;
opacity:0.8;
-ms-filter:‘progid: DXImageTransform.Microsoft.BasicImage(opacity=0.8)’;
filter: progid: DXImageTransform.Microsoft.BasicImage(opacity=0.8);
}

div#lightbox div#lightbox_fg {
position:absolute;
top:100px;
left:100px;
width:300px;
height:300px;
background:#ffffff;
border:solid thin #b9a1a1;
}
</style>
</head>
<body>
<input type=“button” value=“Show Form” onclick=“lightbox.show();” id=“showBox”>
<div id=“lightbox”>
<div id=“lightbox_bg”></div>
<div id=“lightbox_fg”>
<input type=“button” value=“Hide Form” onclick=“lightbox.hide();”>
<form>
<label for=“field1”>First Field: </label><input type=“text” id=“field1”><br />
<label for=“field2”>Second Field: </label><input type=“text” id=“field2”><br />
<label for=“field3”>Third Field: </label><input type=“text” id=“field3”>
</form>
</div>
</div>
<script>
var lightbox = {
show: function() {
document.getElementById(‘lightbox’).style.display = ‘block’;
},
hide: function() {
document.getElementById(‘lightbox’).style.display = ‘none’;
}
}
</script>
</body>
</html>

3

You could either have the lightbox pre-filled and simply display it when certain events are triggered, or open an empty lightbox and populate it on the fly

4

a couple would be helpful

5

Can you clarify your point? What do you mean? It might be easier if you provided a working code example…

6

a example (not excatly what i have in mind) is facebook popup. take a example. when you remove a friend or try to delete your status a popup comes up. static is position but does the work. that sort of

7

If the content of the lightbox is always the same (email feedback form) , and the form is small, then I suggest that you have all the html elements of the lightbox generated on page load and placed in a div container that has display:none. Clicking on a button will set the container to display:block.

8

a simple example would be helpful:(