0

我试图创建一个灯箱，以便我必须在灯箱中打开一个表单。下面是我的 javascript、html 和 css 代码。一切正常。我唯一的问题是，如果我开始最大化或最小化资源管理器的窗口，包含表单的白色内容不会保持与我在开始时给出的相同的固定大小。我希望它保持我在开始时给它的大小而不改变大小，同时最小化或最大化窗口（我希望它就像灯箱在显示照片时使用 facebook）。任何想法如何做到这一点？

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>

这是我的 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;
    }
4

1 回答 1

0

看起来您使用百分比而不是固定单位来设置灯箱的大小。

试试这个：

.white_content {
  width: 320px;
  height: 480px;
}
于 2013-03-30T16:40:55.000 回答