JQuery 数据属性用于多个弹出窗口，但在鼠标离开时触发特定弹出窗口

function initPopup() {
//----- OPEN
$('[data-popup-open]').on('click', function (e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
    e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function (e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
});
}
$(document).ready(function () {
    initPopup();
});

<div class="popup" data-popup="popup-1">
        <div class="popup-inner">
            <h2>TEST</h2>
            <p>TEST</p>
            <p>TEST</p>
            <a data-popup-close="popup-1" href="#" class="close">Close</a>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
        </div>
    </div>

<div class="popup" data-popup="popup-2">
            <div class="popup-inner">
             <h2>TEST</h2>
            </div>
        <a data-popup-close="popup-2" href="#" class="close">Close</a>
        <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
    </div>

如果你想要的是在 html 正文上绑定一个mouseleave事件(我不明白你的用例(，你可以做的是：

$("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结构即可对其他弹出窗口产生相同的效果。 使用它，您可以使用复选框上的trigger来控制 JS 中的弹出窗口。

如果你真的喜欢JS，我建议创建一个对象，并制作一个代码，尽可能少地指定"popup-1"。您可以轻松执行此操作：

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

在这种情况下，即使您的弹出窗口中有很多"关闭"，它也会关闭弹出窗口，而无需指定popup-1(您可以保留open代码(。

添加到要在休假时关闭的弹出窗口中，另一个数据属性类似于 data-bodyclose(或 mettere name(。然后在正文事件中，检查 .popup 是否具有该属性，如果为 true，则关闭它(也许更好的触发数据关闭弹出子项的事件(