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

Community resources Webflow Tips
103

I have successfully created the modal window for the “conditions apply” in the top left. I am wondering if I can have multiple instances of modals on one page? I am not great at knowing the rules of js etc. I duplicated the modal with different classes, everything seems the same, but the second popup at the bottom using an image inside a link block does not work. Can someone tell me if this is possible or what I might be missing? Thanks

http://optomsecurity.webflow.io/

https://preview.webflow.com/preview/optomsecurity?preview=56b8875e5b232ae77e7a4f33521162ae

1 Like
104

Hey guys I don’t think I’ve seen the answer to the question here so forgive me it was posted but does any know how to make sure that the modal only pops up once per user as opposed to every time the user visits the page? Thanks! Otherwise it works great!

1 Like
105

Hey @thesergie, @callmevlad and other Webflow Team members!

I get emails from users for which modal window works only partialy. And that is because of using a button widget (<a href="#"></a>) for modal popup trigger. I would suggest changing a code a little bit here as this is the second most viewed topic and people use this solution a lot (based on only on emails I get or Skype msgs).

<script type="text/javascript">

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

</script>

That simple change in code of adding e inside each function as an argument and also adding e.preventDefault(); result in the code working properly. If users were to use my first code that you have posted in first post then on each click of a button the site will automatically scroll them to the top of the website as it is refering to # by default.

Also I would suggest for those who use non-link objects as modal trigger to add the following:

<style>
  .modal-link, .close-modal { cursor: pointer; }
</style>

This will convert the cursor to a well-known pointing hand where hovered over as it appears as a link instead of text.

Thanks :)

106

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.

107

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

108

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

110

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 ?

111

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

112

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.

113

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

114

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

116

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?

117

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!

118

Hey @designshort

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

Best
Ahmad

119

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

121

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
122

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
123

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

124

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

125

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