Question

我创建了一个弹出窗口，然后将其移动到最终域。现在，当通过角落中的“X”（#overlay-back）关闭时，背景叠加（.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();
}
});

此外，如果您有一个事件（对于examle window.load）并且您将其设置为两次，则会覆盖以前的关联函数。不确定它是否适用于所有事件，但它是你的问题。

关闭时弹出窗口背景不会隐藏

2 个答案: