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

Works a treat, thank you. Glad you’re part of the community!

1 Like

Hey, I was wondering if there was a way to make it such that the modal closes if the user touches anywhere outside the window, is this possible?

I’m using your recommended code for our ‘contact us’ footer link. However, for mobile phones e.g. iPhone 5 the content doesn’t scroll inside the modal window. The window stays ‘anchored’ to the bottom of the page and I can not see the remaining fields or submit button.

It looks great inside of the Webflow design environment. But go live both Safari/Chrome apps, it breaks it.

Public Link:
https://webflow.com/design/locallux?preview=5666a178443940cea65732967ee4d418

Any ideas?

1 Like

HI there
I am using this more or less suessfully here http://jouandesign.webflow.com/meubles-et-luminaires but am having an issue when i close the modal. How can i make it so that the page remains in the same position when the modal closes instead of automatically scrolling back to the ttop?
thanks
jj

Hey! Change this:

$('p').click(function () {
    $('.popupbg').fadeIn();
});
$('.popupbg').click(function () {
    $('.popupbg').fadeOut();
});

to this:

$('p').click(function (e) {
    e.preventDefault();
    $('.popupbg').fadeIn();
});
$('.popupbg').click(function (e) {
    e.preventDefault();
    $('.popupbg').fadeOut();
});

Is it possible to use this modal technique as a way to build a lightbox style photo gallery?

All of the above examples have been using only the one link per modal, so I’m guessing to do a gallery you would need all of the images hidden, and then call it with the modal technique - or is this completely ridiculous?

There’s a lot to take in here, @bartekkustra @danro @thesergie - I successfully made a modal window, but I actually want to use it as a basic “thank you” when submitting form info. I can get it to work except that when I close the modal, it default back to the top of the page, the form is a section much further down the page (this is a one page site)

any ideas on how to bypass this? I tried to look through some comments but didn’t see anything referencing this issue. If it has been brought up I apologize, just point me in the right direction I guess??

Thanks again.

AV (V for Victory!)

On close button you ahve to use the following action:

$('.close-button').click(function(e) {
  e.preventDefault();
  // your code to close the modal
});

Notice the e in the .click(function(...) { ... }). That one lets you catch the event. You can then reffer to this event to prevent default actions that are known for a link (which a close button probably is). If you use e.preventDefault() you will prevent the default actions (go to page #) to trigger when a button is pressed.

Hope it’s clear for you :slight_smile:

1 Like

Hey! Is there some way to make it such that the modal doesn’t just jump back up to the top of the page when opened?

Hi, when I try to implement the code

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

the modal closes automatically immediately after it is opened.

Any help would be welcomed!

See my post above about the e.preventDefault(); thing :smile:

Yeah. That’s because once you click on the object within the body it’s behaving like you clicked the body. It would be best to change this one to a modal bg or something or to use a close button. Take a look at this thread:

Great! Thanks, for this!

Many thanks @bartekkustra - works perfectly. Made perfect sense!

Do you live on the webflow forum? Don’t think I’ve ever seen anyone quite so dedicated.

I applaud you and your services to this forum, sir.

AV (V for Victory!)

1 Like

:smiley: I don’t live here but I spend a lot of time trying to help users here :slight_smile: Glad you like it ;D

1 Like

Hey guys and thank you for this! I tried out the tutorial and everything is good besides that when i put in an X icon in the close modal link it does not appear at all. Any idea what i do wrong?

Thanks again!

Give us a troubleshooting link. That way we will be able to help you :slight_smile:

Ifixed it! Thank you @bartekkustra for your support :smiley:

1 Like

thesergie, thank you for this tutorial. I’m loving webflow and i will buy the premium account as soon the trial mode expires.
You said:

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.

I need this ways to fix this, cause it’s happening exactly what you said :(. Can you help me?
Please, look at: http://renan-mufalo.webflow.com/ - The modal is on ‘CADASTRE-SE’ blue button on top.

Thank you again,

Renan

Question regarding the modal/pop-up. Does anyone know if it is possible to have this pop up on the page without the user having to actually click a button? For instance after the user has been on the page for 30 seconds or 1 min, have the pop up appear on their screen? Could you use the same code to do this? Is it even possible with this program? Any help would be appreciated!

Thanks!
Megan

Video step-by-step :: http://quick.as/rrat4ok

Design :: https://webflow.com/design/bklearn?preview=3c2a9912b09df0168a2c5da061f17c0f

Enjoy.

1 Like