Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I was trying to create a lightbox, so that a form that I have to open in a lightbox. Bellow there is my javascript, html and css code. Everything is working fine. My only problem is that if I start maximizing or minimizing the explorer's window, the white content that includes the form does not keep the same fixed size that I gave at the beginning. I want it to keep the size that I gave it at the begining without changing size while minimizing or maximizing the window (i want it to be like the lightbox uses facebook when displays the photo). any ideas how to do this?

p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="img/add.jpg"/></a></p>
    <div id="light" class="white_content">

<table border="0">
<td >
<fieldset style="width:530px; padding-left:5px; background-color:white " >
<h2><font color="#5D5D5D" size="2" face="caecilia-light', face="helvetica,arial,sans-serif" >
</br>
    School</br>
    <input name="school_1" type="text" size="73" value="<?php echo $user_data_profile_education['school_1'];     ?>"/>
    </br></br>
    Study</br>
    <input name="field_1" type="text" size="73" value="<?php echo $user_data_profile_education['field_1'];     ?>"/>
    </br></br>
    Specialized </br>
    <input name="specialized_subject_1" type="text" size="73" value="<?php echo $user_data_profile_education['specialized_subject_1'];     ?>"/>
    </br></br>
    Degree</br>
    <input name="degree_1" type="text" size="73" value="<?php echo $user_data_profile_education['degree_1'];     ?>"/>
    </br></br>
    Grade</br>
    <input name="grade_1" type="text" size="73" value="<?php echo $user_data_profile_education['grade_1'];     ?>"/>

        </h2></font>
    </fieldset>
 </td>
</table>


<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> 
 </br><img src="img/done_editing.jpg"/> </a></div>
 <div id="fade" class="black_overlay"></div>

and this is my CSS :

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


    .white_content {
        display: none;
        position: absolute;
        top: 45%;
        left: 30%;
        width: 32%;
        height: 51%;
        padding: 30px;
        padding-left:50px;
        border: 5px solid green;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }
share|improve this question

1 Answer

up vote 0 down vote accepted

Looks like you're using percentages instead of a fixed unit to set the size of the lightbox.

Try this: 

.white_content {
  width: 320px;
  height: 480px;
}
share|improve this answer
thanks for your answer...by the way do you know how can I make the page to remain stable so that the page cannot move up or down (like happens in facebook when you open a photo in lightbox)? – Stefanos Mar 30 at 16:50
@Stefanos: You can add overflow: hidden to html and body tags. – rcdmk Mar 30 at 17:22
looks ok but the problem is that the html page will not scroll up or down when i will close the lightbox. I want to stop scroll up or down only when the lightbox will be open. any ideas? thanks... – Stefanos Mar 31 at 16:18
@Stefanos on close, change the overflow to auto via Javascript – Ricki May 27 at 12:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.