Question

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

上面是我的jquery代码，用于显示使用属性的特定弹出数据。

HTML

<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>

我希望它能在身体的mouseleave事件中显示data-popup =“popup-2”

我对jquery很新，但是如果你能够建议一种更好的方式/不同的方式来做到这一点，我很乐意学习。

感谢您花时间阅读。

乔治

Answer 1

如果您想要的是在html主体上绑定FXMLLoader.resources事件（我不理解您的用例），您可以执行以下操作：

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(); } });，并在鼠标进入体内时恢复原始状态（尚未经过测试，但这就是想法）。

有很多方法可以实现一个弹出窗口，个人我只使用css（简单弹出窗口不需要js）用于简单的情况。您可以创建一个可重用的css，然后重现html结构：

HTML：

popup-2

CSS：

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

使用这个你没有js (associated jsbin)。使用此代码，如果检查输入或鼠标不在正文中，它将显示弹出窗口。您只需使用相同的html结构就可以对其他弹出窗口产生相同的效果。使用此方法，您可以使用复选框上的.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中的弹出窗口。

如果您真的喜欢JS，我建议您创建一个对象，然后在尽可能少指定“popup-1”的位置创建一个代码。你可以很容易地做到这一点：

trigger

在这种情况下，即使弹出窗口中有很多“关闭”，它也会关闭弹出窗口，而无需指定$( ".popup" ).on( "click", function( event ) { if ($(event.target).is('.close')) { $(this).hide(); event.stopImmediatePropagation(); event.preventDefault(); } });（您可以保留popup-1代码）。

Answer 2

添加到要保留的弹出窗口，其他数据属性类似于data-bodyclose（或mettere name）。然后在body事件中，检查.popup是否具有该属性，如果为true，则关闭它（可能更好地触发data-close-popup child事件）

JQuery数据属性用于多个弹出窗口，但在mouseleave上触发特定的弹出窗口

jquery的

HTML

2 个答案: