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

I had this working perfectly then I duplicated the site. Now the modal background shows up however the modal window does not. Can anyone help me out? I have tried everything I can think of. I have it working on a this page: sharksbaseball.webflow.io/modal but it does not work on the team page for 12U Milanovich. If you click on any of the boys names, you will see my issue. Public link is here. Thanks, everyone for helping.

I figured it out. Modal needed to be direct children of the body and not inside another DIV.

Hi, I’m quite new to Webflow and web design in general and trying this out for the first time but the code doesn’t seem to be working for me. When I publish and go to my site the modal button does not trigger the modal window. I have tried with the modal background display settings on block and none (when it’s in block it displays the window but then it doesn’t close).

Any help is appreciated

Sweet code this! But on mobile, I couldn’t get the body to be un-scrollable when the modal is open. It only works on desktop for me. Got a solution to this @thunder ?

Is there a way to make sure that it only opens one per user even when they go back to the home page ?

Hey StevenP,

I haven’t needed to make any popups in a while, so not sure how my snippet works/fails on mobile. Glad it was at least partially helpful to you, though.

If quick googling doesn’t turn up likely answers for you, I’d suggest dumping the site into an editor with live reload on a mobile device, so you can quickly test different ideas, then once you find the right css/js incantation backport it to Webflow. Sounds tedious, but can be quite effective to zero-in on a solution.

Post been moved to a new topic: Problem with custom created modal window

Hi Arthur, how did you implement it in the j.s for this partiuclar effect?

I have a modal that changes height as users interact with it, and this causes the page to jump down as the height gets taller. Is there anyway to keep the page (behind the modal) locked when the modal is active?

Thanks for all the tips in here! I was wondering if you had a chance to implement the cookie functionality? I really need it for a site I’m launching next week. Thanks!

Hey @designshort

I think this might help you: Set a jQuery cookie to show popup only once - Stack Overflow. :smile:

Best
Ahmad

Thanks @Ahmadz839! Struggling with how to incorporate the jquery:

function setCookie() {
$.cookie(‘test_status’, ‘1’, { path: ‘/’, expires: 60 });
return false;
}

into this code:

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

Hey guys, great tutorial (so far) but my button doesn’t open up my modal as it should. I followed the instructions and put everything in there (check it out here http://jetty.webflow.io/ the modal “test” button is on the bottom right). It seems to me that for some reason there is an “w-button” added to my classes… I didn’t put it in there… it’s all over the place though.

Any ideas how to fix this? Thank you in advance!!

Found the solution myself: don’t copy the script code into the dashboard custom code fields, rather do it in the page details in the designer! :smile:

1 Like

I have spent hours to finally figured out a simple solution:

  • Apply max-height: 100% and overflow: auto to the “modal window”.

@matt50 Hope this would help.

Cheers,
Daru

2 Likes

@thesergie Very helpful, thank-you for taking the time to investigate :slight_smile:

Hi @WildThayne, I had the same question. Did you ever find out a solution to this?

Just wanna say thanks for this! Makes things way easier and prettier for me.

Hello Webflow community,

I’ve got an issue with my modal wrappers on my first site http://ashwfy.webflow.io/

When you click the ‘close’ interaction in each open modal, it closes the modal but then refreshes the entire site, which I can’t work out how to remove.

Also, now I have 6 modal windows in the builder above the rest of my sections, it makes it really clunky to edit the rest of my site, does anyone have a suggestion on how to temporarily move them below everything to easily edit the rest of my site?

As a designer learning to code, webflow has been amazing so far as a visual builder, just a few sticking points from me :slight_smile:

1 Like

Hi all, I was wondering how could trigger the modal window when the user is trying to close the tab or navigating somewhere else. Thanks for your help!