关闭按钮不关闭弹出框覆盖

Question

这是my ul的html，点击锚标签数据将从其他文件tab2.html加载。

<ul class="list-unstyled " id="dist-tabs">
    <li class="col-xs-3 student item ">
        <a href="./tabs/tab2.html #1">
          shimla
        </a>                   
    </li>
    <li class="col-xs-3 staff item">
       <a href="./tabs/tab2.html #2">
          dharamshala
       </a>
     </li>
</ul>

<div id="dist-container">           
</div>

以下是tab2.html的内容，它将通过ajax加载。

<div class="popup-overlay" id="1">
    <div class="popup-box">         
          <h4>Name 1</h4>       
        <span class="close-btn">x close</span>
    </div>
</div>
<div class="popup-overlay" id="2">
    <div class="popup-box">         
          <h4>Name 2</h4>       
        <span class="close-btn">x close</span>
    </div>
</div>

每件事情都很好，弹出窗口打开就好了。但是点击class =“close-btn”的关闭按钮，弹出框不会关闭

以下是我用于上述目的的js。

var containerId = '#dist-container';
var tabsId = '#dist-tabs';

$(document).ready(function(){

    $(tabsId + ' A').click(function(){
     loadTab($(this));        
        return false;
    });
});

function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');

    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
   $(".close-btn").click(function(){
      $(containerId).fadeOut('fast');
   });
}

我已经通过ajax尝试了很多popup代码但到目前为止还没有成功。所以请帮帮我