关闭时弹出背景不会隐藏

Question

我创建了一个弹出窗口，然后将其移到最后一个域。现在，背景覆盖(#overlay-back)在通过角落的'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();
});

Answer 2

你有什么理由把你的活动设置两次？

     $( 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();
}
});

只要把它改成

       $( document ).on( 'click', function ( e ) {
       if ( $( e.target ).closest('#popup').length === 0 ) {
       $('#popup').hide();
       $('#overlay-back').hide();
}
});

另外，如果您有一个事件(例如，window.load )并将其设置了两次，那么您将覆盖前面关联的函数。不确定它是否适用于所有事件，但这可能是你的问题。