1

ポップアップを作成し、それを最終ドメインに移動しました。隅に#overlay-backある「X」( .close-image私が逃した何か？

ライブサイトはこちら: 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

イベントを 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 ) があり、それを 2 回設定すると、以前に関連付けられた関数が上書きされます。すべてのイベントでそのように機能するかどうかはわかりませんが、それはあなたの問題です.

于 2013-07-16T11:11:34.523 に答える