为重新模式 js 弹出窗口添加悬停事件

Question

我正在为我的网站上的模态框使用重新模态。除了单击事件之外，如何添加悬停事件，以便当用户将鼠标悬停在链接上时，无需单击即可显示该框？

我的触发链接如下：

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

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

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

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