Javascript 单击/淡入淡出时灯箱关闭

我对非常简单的灯箱行为有一些问题。我需要修改这个脚本，以允许用户单击覆盖来关闭表单，并且它只在div中存在问题，而没有覆盖整个屏幕

我还希望它在单击时淡入。我在网上看过，但对我来说毫无意义——我对JS和Jquery还不熟悉，所以任何指针都很好

CSS:

JS:

HTML:

使用淡出和淡出。请参阅随附的JSFIDLE：

加上这个

$（“.black_overlay”）。单击（函数（）{$（this.hide（）；$（“#light”）.hide（）；}）

---

这将允许您在单击覆盖时关闭。

在末尾添加这些行

$('#fade').click(function(){
    $(this).hide();
    $("#light").hide();
});

---

更新了

只是稍微扩展了其余的答案 以这种方式使用

fadeIn（）

和

fadeOut（）

可以实现“关闭按钮”和单击覆盖所需的效果

检查

 $(".showpop").click(function(){
$("#light").show();
$("#fade").show();
});
$(".hidepop").click(function(){
$("#light").hide();
$("#fade").hide();
});

 <a href ="javascript:void(0)" class="showpop"> <input type="submit" class="button" value="Arrange to see a demo" /></a>

<div id="light" class="white_content">

<a href ="javascript:void(0)" class="hidepop textright" style="text-decoration:none;">X</a>

<br />
<br />

            <form method="post" action="#">
                                <div class="row half">
                                    <div class="6u"><input type="text" name="name" placeholder="Name" /></div>
                                    <div class="6u"><input type="text" name="email" placeholder="Email" /></div>
                                </div>
                                <div class="row half">
                                    <div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div>
                                </div>
                                <div class="row">
                                    <div class="12u">
                                        <ul class="actions">
                                            <li><input type="submit" class="button" value="Send Message" /></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>


</div>
<div id="fade" class="black_overlay"></div>

$(".showpop").click(function(){
    $("#light").fadeIn();
    $("#fade").fadeIn();
});
$(".hidepop").click(function(){
    $("#light").fadeOut();
    $("#fade").fadeOut();
});

$('#fade').click(function(){
    $(this).hide();
    $("#light").hide();
});

$(".showpop").click(function(){
   $("#light").fadeIn();
   $("#fade").fadeIn();
});
$(".hidepop").click(function(){
   $("#light").fadeOut();
   $("#fade").fadeOut();
});

$(".black_overlay").click(function() { $(this).fadeOut(); $("#light").fadeOut(); });