javascript - 单击外部背景 div 时如何退出弹出联系表单？

Question

我有一个联系表单，它以黑色背景 div 形式打开，在其中还有一个包含表单本身的 div。

我将联系人表单设置为 X 按钮以退出，现在我希望它在单击黑色背景时退出。

我该怎么做？

这是我的 HTML:

<div class="contact_form">

    <div class="form_container">

        <div class="the-x-container">
            <span class="the-x">X</span>
        </div>

        <h1>Contact Us</h1>

        <h2><span class="text-orange">Improve</span> Business Performance</h2>

        <div class="line"></div>

        <div class="form_content">
            <div> <span> Name:    </span> <input type="text" id="fullname"> </div>
            <div> <span> E-mail:  </span> <input type="text" id="email">    </div>
            <div> <span> Message: </span> <input type="text" id="text">     </div>
            <div id="sendBtn"> Submit </div>
        </div>

        <div id="aboutSuccess">
            Thank you for reaching out! <br>Our team will be in contact with you shortly.
            <!--iframe id="pixel-thing" src="http://www.example.com/thePixel.html" width="1" height="1" style="display: none;" border="0"></iframe-->
        </div>      

        <div id="aboutUnsuccess">
            Invalid Email address. <br><span id="tryAgain">Click here</span> to try again.
        </div>

    </div>

</div> 

这是我的 CSS:

/********************************************* Contact Form ******************************************************/

.contact{
    cursor: pointer;
    color: #fff;
}

html.stop-scrolling {
    /*width: 100%;
    position: fixed;*/
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
}

.contact_form{
    display    : none;
    width      : 100%; 
    height     : 100%;
    background : rgba(0, 0, 0, 0.7);;
    position   : absolute;
    top        : 0;
    left       : 0;
    z-index    : 800;
}

.contact_form .form_container{
    background-image: url('images/popup.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    width: 45.8em;
    height: 50em;
    z-index: 850;
    position: fixed;
    top: 22%;
    left: 34%;
    padding-left: 10px;
    margin: auto;
}

.contact_form .the-x-container{
    width: 32em;
    padding-top: 5.4em;

}

.contact_form .the-x{
    color: #f46406;
    font-weight: bold;
    float: right;
    font-size: 1.3em;
    cursor: pointer;
}

.contact_form h1{
    font-family: 'FSR';
    text-align: center;
    color: #fff;
    font-size: 4em;
    padding-top: 1.7em;
    width: 8.5em;
    height: 0.9em;
}

.contact_form h2{
    font-family: 'Bauhaus93R';
    text-align: center;
    color: #fff;
    font-size: 1.7em;
    width: 21.1em;
} 

.contact_form .line{
    height: 1em;
    width: 30em;
    margin: 0 0 0 3.9em;
    background-image: url('images/popup_stroke.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.contact_form .form_content {
    width: 34em;
    margin: 1em auto;
}

.contact_form .form_content div{
    font-size: 1.5em;
}

.contact_form .form_content span{
    color: #f46406;
}

.contact_form input{
    border-width: 0px 0px 1px 0px; 
    border-style: solid;
    border-color: #fff;
    background-color: transparent;  
    outline: 0;
}

.contact_form #fullname {
    font-size: 1.1em;
}

.contact_form #email {
    font-size: 1.1em;
}

.contact_form #text {
    font-size: 1.1em;
}

.contact_form #sendBtn{
    cursor: pointer;
    color: #f46406;
    text-decoration: underline;
    text-align: center;
    width: 15em;
    margin-top: 1em;
}

.contact_form #aboutSuccess{
    display: none;
}

.contact_form #aboutUnsuccess{
    display: none;
}

这是我当前的 JS:

$('.the-x').click(function(){
    $('.contact_form').fadeOut("slow");
    $('html').removeClass("stop-scrolling")
})

我尝试使用:

$('.contact_form').click(function(){
    $('.contact_form').fadeOut("slow");
    $('html').removeClass("stop-scrolling")
})

但是只要点击一个表单域 = 表单就会隐藏。

Answer 1

$('.contact_form').click(function(e){
    //check whether the target of the click has form_container as a parent
    if (!$(e.target).closest('.form_container').length) {
        $('.contact_form').fadeOut("slow");
        $('html').removeClass("stop-scrolling")
    }
})

http://codepen.io/jlowcs/pen/xbQZZo