0

電子メール フォームをポップアップ ライト ボックスに実装しようとしましたが、フォームに情報を入力するたびに、ライト ボックスは消えますが、オーバーレイは残っているため、完全に閉じません。「閉じる」ボタンだけがライトボックスを閉じ、フィールドフォームをクリックしないようにしました。

なぜこれを行うのかについて、誰かが何か提案や考えを持っていますか?

ここにコード;

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;
}

誰でも大歓迎です!

トム

4

1 に答える 1

0

正常に動作しているようですhere: http://jsfiddle.net/HLLVt/。ブラウザの互換性がないかどうかを確認するために、ハード リフレッシュ (CTRL + F5) または別のブラウザを試してみてください。

于 2013-10-22T17:41:12.423 に答える