1

我创建了一个弹出窗口，然后将其移至最终域。现在背景覆盖（#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>
4

2 回答 2

1

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

$(".close-image").on('click', function() {
       $('#overlay-back').hide();
});
于 2013-07-16T11:09:12.137 回答
0

你设置你的事件两次是有原因的吗？

     $( 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 ）并且您设置了两次，您将覆盖之前的关联函数。不确定它是否适用于所有事件，但它是你的问题。

于 2013-07-16T11:11:34.523 回答