CSS лайтбокс Формодержатель

Я попытался внедрить форму электронной почты во всплывающее окно, но всякий раз, когда мне приходилось вводить некоторую информацию в форму, световая коробка исчезает, но Overlay все еще остается, поэтому он не полностью закрывается. Я пытался убедиться, что только кнопка "закрыть" закрывает лайтбоксы и не нажимает ни на одну из форм поля.

У кого-нибудь есть какие-либо предложения или какие-либо мысли, почему он это делает?

Коды здесь;

HTML-форма....

<div id="quote">

<h1>Ask me for a quote...</h1>
<p>Click on the link below and fill in the form for a quote and I'll get in touch.
<br>


<a href="javascript:void();"  
onclick="document.getElementById('underlay').style.display='block';     document.getElementById('lightbox').style.display='block';">Click here for a Quote...</a>


<div id="underlay">

</div>
<div id="lightbox">
<div id="stylized" class="myform2">
<form id="form1" action="mail.php" method="POST">

<label>Name
    <span class="small">Add your name</span>
</label>
<input type="text" name="name">
<label>Email
    <span class="small">Enter a Valid Email</span>
</label>
<input type="text" name="email">
<label>Phone
    <span class="small">Add a Phone Number</span>
</label>
<input type="text" name="phone">

<br />
<br />

<label>Course Type 
    <span class="small">Please selcet the preferred course  </span>
</label>

<select name="course" size="1">
<option value="starter">Starter Course</option>
<option value="tuition">Personal Tuition</option>
</select>
<br />
<br />
<br />
<label>Prefered day
    <span class="small">Please choose a preferred day    </span>
</label>
<select name="days" size="1">
<option value="Tuesday">Tuesdays</option>
<option value="Sunday">Sundays</option>
</select>
<br />
<br />
<br />


<label>Message
    <span class="small">Type Your Message</span>
</label>
<textarea name="message" rows="6" cols="25"></textarea><br />

<button type="submit" value="Send" style="margin-top:15px;"  class='splash'>Submit</button>
<div class="spacer"></div>

</form>
</div>
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Это CSS

#underlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}
#lightbox{
display:none;
position:absolute;
top:100px;
left:25%;
width:50%;
height:500px;
background-color:#fff;
padding-top:30px;
}

Anyones получили любые идеи, которые были бы высоко оценены!

Том