Атрибут данных JQuery, используемый для нескольких всплывающих окон, но для запуска определенного при отпускании мыши

Если вы хотите привязать событие mouseleave к телу html (я не понимаю ваш вариант использования), вы можете сделать следующее:

$("body").on("mouseleave", function() {
  $("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
  $("[data-popup='popup-2']").hide();
});

Этот код сбросит состояние, что означает, что он не сохранит открытое всплывающее окно, когда мышь повторно войдет в тело. Если вы хотите сохранить состояние, простой способ сделать это:

var isPopupShown = $"([data-popup='popup-2']").is(":visible");
$("body").on("mouseleave", function() {
  isPopupShown = $"([data-popup='popup-2']").is(":visible");
  $("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
  $("[data-popup='popup-2']").show();
  if (!isPopupShown) {
     $("[data-popup='popup-2']").hide();
  }
});

Этот код покажет popup-2, когда мышь покидает тело, и восстановит исходное состояние, когда мышь находится внутри тела (не тестировалось, но это идея).

Есть много способов создать всплывающее окно, лично я использую только css (js не требуется для простого всплывающего окна) для простого случая. Вы можете создать кусок многоразового CSS и просто воспроизвести структуру html:

HTML:

 <label for = "foobaz">click here</label>
  <input type = "checkbox" class = "hide popup-controller" id = "foobaz"/>
  <div class = "popup" id = "popup1">
    <div>foo</div>
  </div>

CSS:

.popup-controller {
  display: none;
}
.popup {
  display: none;
}
.popup-controller:checked + .popup {
  display: block;
}
/** This show the popup if the mouse is out the body **/
body:not(:hover) #popup1.popup {
  display: block;
}

используя это, вы свободны от js (связанный jsbin). Используя этот код, если вход отмечен или указатель мыши не находится в теле, отобразится всплывающее окно. Вам просто нужно использовать ту же структуру html, чтобы иметь такой же эффект для других всплывающих окон. Используя это, вы можете управлять всплывающим окном в JS, используя trigger для флажка.

Если вам действительно нравится JS, я бы порекомендовал создать объект и сделать код, в котором вы указываете «popup-1» как можно меньше. Сделать это легко:

$( ".popup" ).on( "click", function( event ) {
  if ($(event.target).is('.close')) {
    $(this).hide();
    event.stopImmediatePropagation();
    event.preventDefault();
  }
});

В этом случае, даже если у вас есть много «закрытий» внутри вашего всплывающего окна, оно закроет всплывающее окно без необходимости указывать popup-1 (вы можете сохранить свой код open).

Добавьте во всплывающее окно, которое вы хотите закрыть в отпуске, другой атрибут данных, например, data-bodyclose (или название меттере). Затем в событии body проверьте, имеет ли .popup этот атрибут, если true, закрыть его (возможно, лучше запустить событие дочернего элемента data-close-popup)