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

Hi everybody, did anybody figure out the ‘fix’ for this?

Hey Tobias,
I think I’ve got a good solution.
Watch wimvanbokhorst - ontwerp

I asked Levi Camijn, a professional developer at MediaMoose.nl, to design a solution and he created next.

Every ‘project’ its own ‘modal-window’ by number.

I nested each modal-windwo in a tile with it’s own project (my own invention :wink: and it works.

  • tile
    • project
      • tiletext
    • modal-window
      • closmodal
      • etc.
        I hope it will do for you too.
        with kind regards,
        Wim.

That’s strange. I’ve send you the code he used and it is not added in my message. Is there a reason?

Paste the code, select all of it and wrap it using the “</>”-icon in the post-editor.

Hey Tobias,
I give it a second try. Thanks @StevenP
I think I’ve got a good solution.
Watch wimvanbokhorst - ontwerp
I asked Levi Camijn, a professional developer at MediaMoose.nl, to design a solution and he created next.
Every ‘project’ its own ‘modal-window’ by number.

<script type="text/javascript">

$(document).ready(function() {
//Put counters on zero
project_counter = 0;
class_counter = 0;

// Give all div’s with class ‘project’ an id with an increasing number
$("div.project").each(function() {
    project_counter++;
    $(this).attr("id", project_counter);
});

// Give all div's with class ‘modal-window’ an unique class with increasing number
$("div.modal-window").each(function() {
    class_counter++;
    $(this).addClass("modal-window-"+class_counter);
});

// Show by clicking a project div the corresponding modal-window
$("div.project").click(function() {
    id_project = $(this).attr("id");
    $('.modal-window-'+id_project).fadeIn();
});


// Close modal-window by clicking the cross in the corner
$('.closemodal').click(function() {
     $('.modal-window').fadeOut();
 }); 

});

I nested each modal-windwo in a tile with it’s own project (my own invention :wink: and it works.
 tile
o project
 tiletext
o modal-window
 closemodal
 etc.

Hi @bartekkustra I’ve been using your pop up modal technique for a few projects but I’ve run into a problem.
The pop up modal shows perfectly fine on the home page but when I create a symbol for the exact elements used and place them on another page it doesn’t work! The pop up modal I’m talking about can be seen by clicking Luxe Condominiums or Luxe Residences under “Select a Property Type” on the homepage. I’ve brought over the same elements to “Exclusive Aventura” page in the “Wrappers” folder. After exporting the site I see the script is on teh “Exclusive Aventura” page as well and all the ID’s and classes are the same. What am I doing wrong?!?! Thank you in advance for your help here is the project link https://preview.webflow.com/preview/dora?preview=b87cab5580f53b308a44585c58831102

Hey, it should work… Any chance you could contact me over Skype? I’ll see what I can do to help you with that. Contact details are in my profile.

So I tried this modal trick as well … but no bueno. When I click my buttons, they just go to the linked site … no modal popup. Any suggestions?

https://preview.webflow.com/preview/bokbrowser-upgrade?preview=a2c56a1ce2dc8990d5b645cf1ed1c873

Hi,

Is there any way to freeze the background page while pop up window is active?
Especially on mobile when screen is much smaller.

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

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

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

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?