Help With This Lightbox

  • 1
  • Question
  • Updated 8 years ago
Hello friends here is my css code fpr a lightbox,but there is a problem with this box.It does not appears in the center. Please see the following code & give me the right code to make the lightbox appear in center.
<!--
<style>
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);

}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 455px;
padding: 15px;
border:5px solid black ;
background-color: white;
z-index:1002;
overflow: no;

}
</style>
<br>
<p><center><font size="3";>
<a href="javascript:void(0)"

onclick = "document.getElementById('light').style.display='block';document.getElementById

('fade').style.display='block';"><br><u><b>Lightbox link text here!</b></u></a></font></center></p>
<div id="light" class="white_content" ><font size="3"><a href ="javascript:void(0)" onclick =

"document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'"><img src="resources/closelabel.gif" border="0" alt=" Close this lightbox - Click here " title="Close this lightbox"></a>
<br><br>
Your content here! (Just copy and paste the old content from the old code and paste into this part!)

<br><br><br><font size="2"></font><br><br><br><br></font><br><br><font size="2">To close, click <strong>Close</strong> at top</font>
<a href = "javascript:void(0)" onclick =

"document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'"></a></div><div id="fade" class="black_overlay"></div>
-->
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
  • sad

Posted 8 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
I'm going to ask one of my colleagues (Sanja) to come and have a look at this. She's quite skilled in this area and will be the best one to give some suggestions and advice.

Thanks for your patience!

Emmy
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Try This

.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);

}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
width: 50%;
height: 50%;
padding: 15px;
border:5px solid black ;
background-color: white;
z-index:1002;
overflow: no;

}
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Kevin!
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
You Can See My Lightbox Here http://edubrary.yolasite.com/css.php
just click the both links
1)Host a website launch party
2)image #1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Adil

Does Kevin's solution help? Please let us know if you're still having trouble with this.