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

@danro Thanks Dan - That works!

1 Like

@Colin_Roper I’m glad I could have helped. And I’m sorry I didn’t do that faster… I spent 6 hours in the hospital with my friend yesterday… Moving to another apartment is a hard thing to do ^^ Remember not to drop yourself from stairs :smiley:

@danro thanks for helping Colin :slight_smile:

1 Like

Thanks for all the helpful info!

I have the modal working as a part of my navigation bar. Whenever you click it however, it takes you back up to the top of the screen. So if you have scrolled down past the first section and click the modal it takes you back up to the top.

Is there anyway for it to open up where ever you are on the screen?

Thanks!

https://webflow.com/design/disabilityinsurancegeek?preview=5b30ac493293a52dd7200c17f7c390b2

@LJB You have to have e.preventDefault(); in your code right after function(e) {.

In example

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

The e in function is neccesarry for e.preventDefault(); to work.

@bartekkustra Works perfectly, thanks!

1 Like

Hey folks,

Wanted to share the code I’m using, which rolls up a few of the tweaks above and adds a few of my own, in case anyone wanted to copy-paste it:

    $(document).ready(function() {
    $('.modal-link')
        .css('cursor', 'pointer')
        .click(function(e) {
            e.preventDefault();
            $('.modal-background').fadeIn();
            $('body').css('overflow', 'hidden');
        });
    $('.close-modal')
        .css('cursor', 'pointer')
        .click(function(e) {
            e.preventDefault();
            $('.modal-background').fadeOut();
            $('body').css('overflow', 'auto');
        });
});

You’ll note: the links that open/close the modal get a pointer cursor, so if you have a regular text div open/close the popup it’ll feel actionable. Also, I tweak the overflow of ‘body’ while the popup is open, so that only popup content will be scrollable.

I use a fixed window (not just the background) with fixed height/width of 70% and move it left/down 15% (so it’s centered), then set overflow:scroll. That means that I can add more content and it’ll just be scrollable. Note that this means you need to fix the window’s close button as well, I just move it down/left 16% so it appears in the top-right corner of the window regardless of scroll.

Hope this helps some of you.

3 Likes

Hi Guys,

I’ve followed the instructions in the original post I’m having an issue with the nav links appearing above the modal window. Originally I had an issue with a lot of the elements appearing over the top of the modal, however changing the z index to 3 fixed this (missed it in the original post).

Any idea why the nav links/brand would be appearing over the top of the modal?

Thanks

Set z-index of modal to 999 :wink:

Good catch @thunder!

As @bartekkustra mentioned you need to set a z-index for the modal that’s greater than the navbar component. Select the navbar and see what the z-index is set to and make sure it’s greater than that.

Hey!

Change

$('body').click(function() {
  $('.modal-background').fadeOut();
})

to

$('body').click(function() {
  if($('.modal-background').css('display') != 'none') {
    $('.modal-background').fadeOut();
  }
});

Should do the work.


#edit

Nope, It doesn’t work. Let me find a solution for this okay? Be right back :smiley:


@edit2

Okay, found a fix :slight_smile: It’s not exactly what I wanted but works and adds that nice effect ;D

html

    <div class="popupbg">
        <div class="popup">click anywhere</div>
    </div>
    <p>clickme</p>

css

.popup {
    display: block;
    z-index: 99;
    margin: 0 auto;
    width: 300px;
    height: 300px;
    background: #f9f9f9;
    box-shadow: #333 0px 0px 8px -2px;
}
.popupbg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(55, 55, 55, 0.3);
    z-index: 98;
}

jQuery

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

live demo

1 Like

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!