Javascript 在div外部单击时，其他div必须使用jquery删除其类

我在rails中使用ajax调用，并尝试切换用户配置文件弹出窗口

代码如下：

$(document).on("click", ".fr-tribute", function(){
    var elem = $(this);
    $('.fr-tribute').find('.popup-overlay').removeClass('active');
    if ($(elem).children(".popup-overlay").size() == 0){
      var user_id = $(this).attr("data-user-id");
      $.ajax({
        url: "/get_user_info",
        type: "GET",
        data: { user_id: user_id },
        success: function(response, status, xhr) {
          $(elem).append('<div class="popup-overlay active row mx-0 mt-3 py-3"> <div class="popup-image col-4 pt-1 pl-2 border-radius-7px "></div><div class="popup-content col-8 pt-2"></div></div>');
          $(elem).children(".popup-overlay").children(".popup-image").html(response.user_featured_image);
          $(elem).children(".popup-overlay").children(".popup-content").html(response.user_name +",<br>"+ response.user_job_title +",<br>"+ response.user_organization);  
          },
        error: function(xhr, status, error) {
          console.log(xhr, status, error);
        }
      })
    }
    else{
      $(elem).find(".popup-overlay").toggleClass("active");
    }
});

$（document）.on（单击“，.fr属性”，函数（）{
var elem=$（本）；
$（'.fr property'）.find（'.popup overlay'）.removeClass（'active'）；
if（$（elem）.children（“.popup overlay”）.size（）=0）{
var user_id=$（this.attr（“数据用户id”）；
$.ajax({
url:“/获取用户信息”，
键入：“获取”，
数据：{user\u id:user\u id}，
成功：功能（响应、状态、xhr）{
$（元素）。附加（“”）；
$（elem）.children（“.popup overlay”）.children（.popup image”）.html（response.user\u-image）；
$（elem）.children（“.popup overlay”）.children（.popup content”）.html（response.user\u name+，
“+response.user\u job\u title+，
”+response.user\u组织）；
},
错误：函数（xhr、状态、错误）{
日志（xhr、状态、错误）；
}
})
}
否则{
$（elem）.find（“.popup overlay”）.toggleClass（“active”）；
}
});

一切正常，但我无法关闭弹出窗口

---

当我点击元素1的类“.fr属性”时，弹出窗口打开。当我单击具有相同类“.fr属性”的元素2时，元素1的弹出窗口关闭，元素2的弹出窗口打开。这是预期的行为。唯一的问题是，如果我点击弹出窗口之外的任何地方，弹出窗口不会关闭。如果用户单击外部，我希望弹出窗口关闭。我想不出来。请帮忙。

这能回答您的问题吗？不完全是。如果用户单击外部，我想删除弹出覆盖中的类“active”。