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

[thesergie (Sergie Magdalin)]

Here’s a quick and dirty way to create a modal in Webflow before we create our own Modal component inside Webflow.

Example:

http://modals.webflow.com

Click here to mess with it inside Webflow. (the modal is the last invisible section.)

Step 1: Design a modal

1. Create a section in the body and give it a class “modal background”. Give it a transparent black background. Make it Position: fixed, and increase z-index. (This will make the modal stay in the same place when scrolling on the page. This is just one way of doing it. Choose different CSS for different behavior). Like so:
2. 
3. Add a block (div) inside of it and call it “modal window”. Give it margin left and right “auto” so that it is centered in the page, and give it a width of 70%. (There are other ways you can center it using CSS like setting a % left and right margin or making it absolute positioned inside of the background. Your choice). Like so:
4. 
5. Drop any structure and content inside of that block. Like so:
6. 
7. Add a link block with an X icon or a “Close” text link with in the top right corner. Give that link the class “close modal” and style it any way you want. Like so:
8. 
9. Select the modal background element that you placed in the body and make it Display: None like so:
10. 
11. Create a button on the page and give it the class “modal link”.

Step 2: Add the codez

Finally…now you have everything set up in the Webflow Designer. Go to your dashboard and add this code in the before </body> code section in your site’s settings:

<script type="text/javascript">

$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-background').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-background').fadeOut();
  });
});

</script>

And there you have it. Thanks @bartekkustra for the jQuery code to make this happen.

Tips:

• You can tweak the width of the “modal window” so it’s not so squeezed in on mobile devices.
• I set the modal background to Absolute instead of Fixed on mobile devices so that users can actually scroll down to see all of the content inside the modal. The only problem is the background doesn’t stretch 100% of the height of the device. There are ways to fix this.
• To edit the modal - find it in your navigator, change Display: none to Display: block. Then you’ll be able to see it. Edit away. Don’t forget to change it back to Display: none.
• 
• 

Cheers!

[bartekkustra (Bartosz Kustra)]

You can also set it’s position to be on top of the window (top: 0;) and make .slideDown(); and .slideUp(); instead of .fadeIn(); and .fadeOut();. That will give it that OS X look of system popups

[RFleming5280 (Rob Fleming)]

Hi … I did everything in this tutorial but I used different class names. (See below) However, it does not work in Preview mode. I am wondering if this only works once published. Please advise and many thanks!!! So close!

[bartekkustra (Bartosz Kustra)]

Please use code tags

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

Give us please troubleshooting link and link to active site.

[thesergie (Sergie Magdalin)]

You are correct it won’t work in preview mode because the custom code is added after publish, not while in the designer. You can easily publish to your subdomain and test it there:

[bartekkustra (Bartosz Kustra)]

Oh I’m sorry. I didn’t read the Preview mode carefuly… As @thesergie said, it won’t work in preview mode.

[RFleming5280 (Rob Fleming)]

Many thanks guys! Will give it a try after publishing.

[Daniel_Sun]

Hey Guys, thanks for the tips. I just couldn’t get how can I link the modal to the button. Is it on the code or I need to make on webflow? How can I achieve this?

Thanks

[bartekkustra (Bartosz Kustra)]

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

[Daniel_Sun]

Thanks for the fast response @bartekkustra . I’m quite a newbie in code and webdesign but with webflow and your help things are getting cleared and more exciting everyday. Again, many thanks

[kingcolers]

Hi guys,

Thanks for posting this - it’s 95% what I need.

In my case I’d like the modal to open as soon as the page loads. What changes do I need to make to the jquery code for this to happen?

Thanks very much for your help.

Colman

[Karl_M (Karl)]

This is a really great tutorial, much needed!

My one question though - Is it possible to make a close action when clicking anywhere outside the model, rather than the actual close link?

[bartekkustra (Bartosz Kustra)]

@kingcolers

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

---

@Karl_M

$('body').click(function() {
  $('.popup-window-class-here').fadeOut();
}); 

[kingcolers]

That’s great. Really appreciate your help. Thanks!

[kingcolers]

Actually, one more question. How can I set it so that the modal doesn’t appear every time a user returns to the site. That is, it only appears on the first visit.

If that’s possible, I’d really appreciate your help.

[bartekkustra (Bartosz Kustra)]

You can add cookies functionality and check whether there is a cookie already or not. Simple but need some time to implement.

[Colin_Roper]

Great tutorial and tips everyone. Could someone point me in the right direction for how I can create a link to my page that directly launches with the modal open? I don’t want to always have it open on arrival but for specific links I want it to open (e.g. to display a “thank you for your order” message on top of my page).

[kingcolers]

A couple f more questions on this. One of which seems really dumb:

• I have the modal box on my home screen, but the modal background is preventing me from editing anything else on the page, when I am in design mode. Can I temporarily hide it while I work on other stuff?

• I’d like to close the box my clicking “Close” and/or clicking anywhere outside the box. But when I tried combining the jquery snippets you provided above (thanks again) the box closes when I click anywhere on the screen - including in the box!

Here’s the code I’m attempting to use. Any advice?

[bartekkustra (Bartosz Kustra)]

That is because you have

$('body').click(function() {
  $('.modal-background').fadeOut();
});

That means that whenever you click anywhere on your page the window will fadeOut();. You can hide your modal by selecting it and setting display: none; to it. You can (and even should) publish your site with your modal window hidden. That way whenever you load your page it will fadeIn() the modal window smoothly

[kingcolers]

That’s excellent. Thanks!