彈出式背景在關閉時不會隱藏

Question

我創建了一個彈出窗口，然後將其移至最終域。現在當通過拐角處的'X'（.close-image）關閉時，背景覆蓋圖（#overlay-back）不會隱藏，但按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），你設置了兩次，你覆蓋以前的相關的功能。不知道它是否適用於所有事件，但它會成爲你的問題。