使用JS顯示/隱藏彈出窗口，窗體

Question

我有一種形式，當用戶單擊send..the字段發送到AJAX，然后發送到php函數。 之后，打開一個彈出窗口/ div。

我正在嘗試做，當用戶單擊網站上的某個位置時，此div隱藏。 但是行不通，有什么主意嗎？

HTML表單：

<form id="contactForm">
                <select id="contactFormSelect">
                  <option value="General" selected>General</option>
                  <option value="Support">Support</option>
                  <option value="Suggestions">Suggestions</option>
                  <option value="Jobs">Jobs</option>
                  <option value="Press">Press</option>
                  <option value="Founder">Founder</option>
                </select>
                <br />
                <input id="contactForm" type="text" name="name" placeholder="Your name"><br />
                <input id="contactForm" type="text" name="email" placeholder="Your email"><br />
                <input id="contactForm" type="text" name="subject" placeholder="Subject"><br />
                <textarea id="write" name="textarea" placeholder="Write here"></textarea><br />
                <input id="submitForm" type="button" value="SEND" onclick="contactRequest(this);">
            </form>

HTML彈出/分區：

<div id="contactSent">
<div id="backgroundOpacity"></div>
<div class="contactSent">
    <div id="contactSentFirst">
        Thank you!
    </div>
    <div id="contactSentSecond">
        Your message has been successfully sent. We will contact you very soon!
    </div>
</div>
<div id="buttonOK">
    Ok
</div>
</div>  

JS：

function contactRequest(elem)
{   
var postData = $('#contactForm').serialize();
    postData += "&textarea="+$('#write').val();
    postData += "&selectedOption="+$('#contactFormSelect').val();;

if($(elem).parent().children('#contactForm').val() != ''){      
    $.ajax(
    {
          url: "/newcontact/pedido-contato/",
          type: "POST",
          data: postData
    });

}
$('#contactSent').show();
}


$('body').click(function(){
$('#contactSent').hide();
});

Answer 1

您正在談論的彈出div元素聽起來像bootstrap modal元素。 也許您應該在這里看看： http : //getbootstrap.com/javascript/#modals 。 模態確實易於實現，並且可以在網站上提供模態文檔。 希望這可以幫助

Answer 2

看來您的backgroundOpacity元素在body標簽之上。 嘗試為其分配事件。

$('#backgroundOpacity').click(function(){
    $('#contactSent').hide();
});