Streaming live at 10am (PST)

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


#1

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. 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:
  3. Drop any structure and content inside of that block. Like so:
  4. 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:
  5. Select the modal background element that you placed in the body and make it Display: None like so:
  6. 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!


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

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 smile


#3

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!


#4

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.


#5

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:


How to redraw slider (in modal) when modal window opens
#6

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


#7

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


#8

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


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


How to fix background when popup is open
#10

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


#11

Hi guys,

Thanks for posting this - it's 95% what I need. 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


#12

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?


#13

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

#14

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


#15

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.


#16

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


#17

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


#18

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?


#19

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 smile


#20

That's excellent. Thanks!