Streaming live at 10am (PST)

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

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. |237xauto
  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. Drop any structure and content inside of that block. Like so:
  5. |400xauto
  6. 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:
  7. |132xauto
  8. Select the modal background element that you placed in the body and make it Display: None like so:
  9. |237xauto
  10. 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.
  • |234xauto
  • |238xauto

Cheers!

18 Likes
SOLVED - Pop Up Modal - FIGURED IT OUT!
How Does Webflow Create the New Feature Updates pop-up Modal?
How to create a custom Lightbox using Interactions
Feature request: Modal window component
"Link to section" is linking to wrong section?
Modal disappearing on click
Panel with transitioneffekt
Trouble with Modal/Pop-Up
Webflow Workshop #124: Creating a custom modal
Lightbox - button inside? - need help
Code for more than one Modal in the same page
Code for more than one Modal in the same page
Slider dont work inside modal window
Modal Not Working
Open Lightbox txt
Custom Lightbox Similar to Apple
Problem with popup video
How to create a simple Terms of Service / Privacy Policy page?
Ability to add cookie/session management for interactions/windows
Links not working inside FX Wrappers
Issue with webpage section
Modal popup - restricting background scroll
Execute script on button click
Pop-Up Contact Form
Pop-up modal doesn't appear on mobile view
How to center modal window and use a video inside it
Create pop up window and copy HTML code
Popup/Modal window
Modal Pop Up Help
Need help with implementing popu modal properly
Pop-Up when you get to website - for email or offer etc
Modal/Pop Up Doesn't Work When Exported
Pop up in contact form
Login lightbox in webflow
Modal popup - problem with Chrome
Salesforce form
Youtube video with different language subtitles
Open link in new window
Making adjustments lightbox widget
How to create video modal pop up?
How to create video modal pop up?
Content is not displaying in modal window
Anyone know how to create a pop up video on web flow?
Automatic open lightbox when page load
Suggestion: Cursor Control
Need help to create a custom lightbox
I Need help to make 100+ modals
Can a popup be shown only the first time a visitor sees my page?
Modal window - background full height
Modal window - background full height
Random number chooser
"Popup" Modal help please
How to delete head code and create pop-up window

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

6 Likes

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!

1 Like

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.

1 Like

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:
|150xauto

1 Like

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

1 Like

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

1 Like

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

1 Like

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

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

1 Like

Hi guys,

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

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

1 Like

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?

1 Like

@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();
}); 
3 Likes

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

2 Likes

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.

1 Like

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

1 Like

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

1 Like

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?

1 Like

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

1 Like

That’s excellent. Thanks!

1 Like