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

Community resources Webflow Tips
62

I moved 5 posts to a new topic: How to create video modal pop up?

63

Teach me your ways, @thesergie . Please. And thanks.

This modal is sexy as hell, I’m so glad you guys posted this and hashed it all out in the comments. Looking forward to getting that background fixed up. Thanks!

64

So I did this and I’m not sure if you’ve already addressed this issue, but on mobile devices, when my trigger button is low down on the page, I hit the trigger button and the modal loads all the way at the top of the page, off-screen. Unless you just happen to scroll up, you’ll never even know it opened. Is there a way to get it to open over the point where the click occurs? Looks/functions perfectly on my desktop, just seeing this issue on tablet and phone.

For reference, it’s at http://salesographer.webflow.com and it’s the button that says “I Gotta Have This!”.

Thanks for all of the hard work you put in over here!

65

Yes you can. Add the interaction you see here. Type the section name (in this case, modalwindow) into the affect different elements tab. Also adjust the wait timer for your desire, I set here to 10k ms.

66

Is there a way to close modal window using " esc " key?

67

Hi @omnia, you can add an event to be triggered when the escape key is pressed, as in the example below, to close the modal window using the escape key… this is a simple example to close the modal, you could also put in a check to see if the modal window was open or not first…

<script>
$( document ).ready(function() {
        
        $(document).keyup(function(e) {

            if (e.keyCode == 27) {
    
                $('.modal-background').fadeOut();
    
            }   // esc
        });
});
</script>

See if that helps you, cheers !

68

Hi,

My modal is almost done. I need to fix up a thing now and i want to know if anyone can help me:
http://quickimovel.webflow.com/

Please, clica at the yellow button at the center of the page. The modal will open. If click outside de modal, the modal closes and this is right. But if i click into form fields or any place of the page, the modal closes.

Can the modal only closes if i click at the X button or outside the modal? Thanks!

Renan

69

@Renan_M_falo Check screenshot below. One with red box does close your modal pop up when you click on anywhere on the body. However, seems you don’t need all of it which inside blue box. It does same thing as your last script but your last script does the job better. I don’t see you have #show-modal anyway.

Try it and let us know how it goes.

Cheers

409×538 37.5 KB

70

Hello pasti​wibawa, thank you!
But i’m having a new problem now. The modal closes automatically immediately after it is opened.
Can you help me with this?

THanks,

Renan

71

@Renan_M_falo Can you tell me what last thing you did before this problem raised?

72

@Renan_M_falo Put all script back and just delete the one inside red box.

73

@bartekkustra

I implemented this and it works as it should, however my problem is that the modal is a signup page, so anytime I click on any form field inside the inner div it closes the modal.

Is there a way to prevent the modal from fading out when the inner div contents are clicked.

Thanks alot.

74

@Busayo_Kupoluyi hey! Could you please link me to the website you have built? There probably is a problem with the $('.classname').click() part in your script that targets wrong class/div.

It is best to use a close button instead of "click anywhere to close popup".

75

@bartekkustra

Here is the public link

https://webflow.com/design/snapbrag-website?preview=44fb03c2c5f011e7f1ab5cd86d93aac9

76

@Busayo_Kupoluyi

  1. How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow
  2. Please publish your website and give the link to the published website here. If you don’t want to share published website to people you can send a Private Message (PM) to me.
77

@bartekkustra

Sorry about that, I made some changes to the URL, so the public link I posted earlier doesn’t work anymore. Here is the correct link:

https://webflow.com/design/snapbrag?preview=44fb03c2c5f011e7f1ab5cd86d93aac9

The modal is activated by the “create my brag” button. Thanks a lot for your help.

78 
$('.login-modal').click(function (e) {
    e.preventDefault();
    $('.login-modal').fadeOut();
});

This part of code is making the whole window fadeOut once you click anywhere on the box. Remove it so you will be only able to close modal by pressing closing button.

79

You should be able to do this without resulting to custom jquery with the webflow interaction.

81

I had this working last night and there was a UI update done in the last 24 hours that appears to have possibly broken this… anyone else running into an issue with this after the recent update?

82

Hi Everyone,

Absolutely love this Modal opportunity. However I’m having an issue playing a hero slider within the Modal Window. The slides do not transition, only the 1st slide appears.

In my testing I noticed, if I keep the Modal Background display ‘inline’ the hero slider within the Modal Window transitions.

Here is my public link : https://webflow.com/design/clbphoto?preview=4a31a0c031b79c41d1e8e45e14351f14

  1. “The Page with the Modal Link is called, copy-page-test.”
  2. The 1st image on the page is the Modal Link.

Thanks for you help!
Huge fan of Webflow!

Chris