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

Community resources Webflow Tips
9

Let me explain the code. First, let’s see the code used:

$(document).ready(function() {
  $('.ButPlayDreamscapes').click(function() {
    $('.ModalBG').fadeIn();
  });
  $('.ButCloseModal').click(function() {
    $('.ModalBG').fadeOut();
  });
});

Now let’s explain it.

$(document).ready(function() {
  $('.button-class-here').click(function() {
    $('.popup-window-class-here').fadeIn();
  });
  $('.close-button-class-here').click(function() {
    $('.popup-window-class-here').fadeOut();
  });
});

The first line means: when the document is ready, do this function:.
In second line you put the name of a class of button which will open the popup.
Third line tells what will be shown. .popup-window-class-here in my code or .ModalBG in @thesergie’s code is a class of a popup you create.
In 5th line you put the name of a class of button from modal window which will close the popup.
6th line tells what will happen when the button in 5th line is clicked. This code will close the popup.

If you read the code carefuly you will understand it easily :slight_smile:

4 Likes