Question

我已经尝试将电子邮件表单实现到弹出式灯箱，但每当我在表单中输入一些信息时，灯箱就会消失，但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;
}

任何人都有任何想法，非常感谢！

汤姆

Answer 1

似乎工作得很好here：http://jsfiddle.net/HLLVt/。也许尝试刷新（CTRL + F5）或其他浏览器以查看它是否缺乏浏览器兼容性。

CSS灯箱表格持有人

1 个答案: