javascript - 关闭时弹出背景不隐藏

Question

我创建了一个弹出窗口，然后将其移至最终域。现在背景叠加层 (#overlay-back) 在通过 Angular 落的“X”(.close-image) 关闭时不会隐藏，但在按下时会隐藏ESC键。我错过了什么？

这是实时站点:http://www.nominee-services.co.uk/

JS :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#overlay-back').fadeIn(800, function () {
            $('#popup').show();
        });

        $(".close-image").on('click', function () {
            $('#popup').hide()
        });
    });
    $(".close-image").on('click', function () {
        $('#overlay-back').hide();
    });
    $(document).on('keydown', function (e) {
        if (e.keyCode === 27) { // ESC
            $('#popup').hide();
        }
    });
    $(document).on('keydown', function (e) {
        if (e.keyCode === 27) { // ESC
            $('#overlay-back').hide();
        }
    });
    $(document).on('click', function (e) {
        if ($(e.target).closest('#popup').length === 0) {
            $('#overlay-back').hide();
        }
    });
    $(document).on('click', function (e) {
        if ($(e.target).closest('#popup').length === 0) {
            $('#popup').hide();
        }
    });
</script>

CSS:

#popup {
    position: absolute;
    display: hidden;
    top: 50%;
    left: 50%;
    width: 960px;
    height: 98px;
    margin-top: -194px;
    margin-left: -480px;
    background-color: #fff;
    z-index: 20;
    padding: 5px;
}
#overlay-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=60);
    z-index: 19;
    display: none;
}
.close-image {
    display: block;
    float: right;
    cursor: pointer;
    z-index: 21;
    position: absolute;
    right: 8px;
    top: 8px;
}

HTML :

<div id="overlay-back"></div>
<div id="popup">
    <img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="960" height="398" /></span>
</div>

Answer 1

您必须将点击事件放在 document.ready() 函数中。

$(".close-image").on('click', function() {
       $('#overlay-back').hide();
});