0

I'm using remodal for modal boxes on my site. In addition to the click event, how can I add a hover event so when the user hovers on the link, the box appears without having to click it?

My trigger link is the below:

<a href="#" data-remodal-target="my-popup">Popup link</a>
J. Chomel
  • 8,193
  • 15
  • 41
  • 69
casiokid
  • 119
  • 9

2 Answers2

0

It worked by adding the following lines to 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();
    });
casiokid
  • 119
  • 9
0

I guess you will have to initialise it manually via js.

So you will have something like this:

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

However, you should probably also create some logic which checks whether modal is already opened (so it won't open another one, when previous one is still open).

jay
  • 153
  • 1
  • 12