[Tutorial] How to create a modal/pop-up in Webflow

Community resources Webflow Tips
86

I did something really silly because I couldn’t get the modal to appear correctly on a mobile device (modal would appear at top of page). I couldn’t get the e.preventDefault(); referenced above to work for me. So I did this:

$(document).ready(function() {
  $('.modal-link').click(function(e) {
    e.preventDefault();
    $('.modal-background').fadeIn();
    $('html, body').animate({ scrollTop: 0 }, 'fast'); //scrolls to top
  });
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('.modal-background').fadeOut();
  });
});

I added the scrollTop which works for me. I’m probably doing something weird but it works.

1 Like