0

I am using an ajax call in rails and i am trying to toggle a user profile popup.

The code is as follows :

$(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");
    }
});

Everything works fine but I am not able to close the popup.

When I click on element 1 having class '.fr-tribute' the popup opens. When I click on element 2 with the same class '.fr-tribute', element 1's popup closes and element 2's popup opens. This is the expected behaviour. Only thing is that if I click anywhere outside the popup, the popup doesnt close. I want the popup to close if the user clicks outside. I am not able to figure it out. Pls help.

Geo Mukkath
  • 145
  • 11
  • Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) – xy2 Oct 31 '20 at 10:34
  • Not exactly. I want to remove the class 'active' in popup-overlay if the the user clicks outside. – Geo Mukkath Oct 31 '20 at 10:43

0 Answers0