Javascript 在框外单击时，模型弹出框未关闭

我试图使一个模型弹出关闭时，用户点击框外。因为我想我可能把JS部分搞砸了

这是我的密码：

<div id="modal-container">
  <div class="modal-background">
    <div class="modal" id="modal" style="width: 60%; height: auto;" >
       // HTML stuff goes here //
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
  $('.button').click(function(){
  var buttonId = $(this).attr('id');
  $('#modal-container').removeAttr('class').addClass(buttonId);
  $('body').addClass('modal-active');
})
window.addEventListener('click', function(e){
    if (document.getElementById('modal-container').contains(e.target)){ 
        
    } else {
      $('#modal-container').addClass('out');
      $('body').removeClass('modal-active');
    }
});
</script>

//HTML内容在这里//
$（'.button'）。单击（函数（）{
var buttonId=$（this.attr（'id'）；
$（“#模态容器”）.removeAttr（'class'）.addClass（buttonId）；
$（'body'）.addClass（'modal-active'）；
})
window.addEventListener（'click'，函数（e）{
如果（document.getElementById（'modal-container'）。包含（e.target））{
}否则{
$（“#模态容器”）.addClass（'out'）；
$（'body'）.removeClass（'modal-active'）；
}
});

---

非常感谢您的帮助。

@Amesshiel做了，现在它甚至没有弹出窗口