Question

我在我的网站上使用remodal作为模式框。除了点击事件之外，如何添加悬停事件，以便当用户在链接上悬停时，会显示该框而不必单击它？

我的触发链接如下：

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

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

为remodal js popup添加悬停事件

2 个答案: