为 remodal js 弹出添加悬停事件答案

【问题标题】：Add a hover event for remodal js popup为 remodal js 弹出添加悬停事件
【发布时间】：2016-06-06 08:59:26
【问题描述】：

我将remodal 用于我网站上的模态框。除了点击事件之外，如何添加悬停事件，当用户将鼠标悬停在链接上时，框会出现而无需点击？

我的触发链接如下：

<a href="#" data-remodal-target="my-popup">Popup link</a>

【问题讨论】：

标签： jquery html popupwindow remodal

【解决方案1】：

它通过在 remodal.js 中添加以下行来工作：

    $(document).on('mouseover', '[data-' + PLUGIN_NAME + '-target]', function(e) {
      e.preventDefault();

      var elem = e.currentTarget;
      var id = elem.getAttribute('data-' + PLUGIN_NAME + '-target');
      var $target = $('[data-' + PLUGIN_NAME + '-id="' + id + '"]');

      $[PLUGIN_NAME].lookup[$target.data(PLUGIN_NAME)].open();
    });

【讨论】：

【解决方案2】：

我猜你将不得不通过 js 手动初始化它。

所以你会有这样的东西：

<a class="remodal-popup" href="#" data-remodal-target="my-popup">Popup link</a>

<script>

    $( document ).ready(function() {

        $(".remodal-popup").hover(function(){

        //Get data remodal target from this
        var target = $(this).attr("data-remodal-target");

        //Initialise remodal with target
        $(this).remodal().open();
        })

   });

</script>

但是，您可能还应该创建一些逻辑来检查模态是否已经打开（所以当前一个仍然打开时，它不会打开另一个）。

【讨论】：