Streaming live at 10am (PST)

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


#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. http://forum.webflow.com/t/how-to-enable-a-webflow-projects-public-link/2573
  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


#83

Great collaboration everyone, love how the Webflow community is like a familia! wink

One ask, how would you go about having the Modal Window
1. Open up upon site loading in the browser
2. Clicking outside the modal window doesn't close it (I think in scanning the page this was mentioned and maybe asked.

My JTBD (jobs to be done here) is to provide a short guided tour of lets say 5 features within the modal window to get the user up to speed, but they can also cancel at any time, thus making the modal window go away.

I'd be willing to share this project / design / component with everyone if I could get some dev help, I'm more of a design guy (visual flow of UI & UX)

thxs wink


#84

Just an update to my question this morning -

I found an answer on the forum, thought I would share.

Hi @garethknott, as I mentioned to you in our support request, there was an issue with the the script, this is happening because the modal is set to display: none when the page loads, and the Slider is unable to update its layout when it is hidden.

You can fix this by adding this code just after your call to fadeIn():

Webflow.require('slider').redraw();
And it should redraw the slider before it comes into view.

I also had suggested some of the other fixes as mentioned earlier in this thread, that you had not yet implemented, so now it should be working good, please let us know. Cheers, Dave


#85

Excellent thread.

I am always learning something in this forum !!!!! smile


#86

I did something really silly because I couldn't get the modal to appear correctly on a mobile device (modal would appear at top of page). I couldn't get the e.preventDefault(); referenced above to work for me. So I did this:

$(document).ready(function() {
  $('.modal-link').click(function(e) {
    e.preventDefault();
    $('.modal-background').fadeIn();
    $('html, body').animate({ scrollTop: 0 }, 'fast'); //scrolls to top
  });
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('.modal-background').fadeOut();
  });
});

I added the scrollTop which works for me. I'm probably doing something weird but it works.


Disable Scroll on Fixed Div Overlay
#87

I would like to mak at least 10 modals on one page, each activated with an own different tile.
Do I have to add a unique script for each tile/modal, or is there an easier way.


#88

Hi @keetmeester, one thing you could try, is to create a javacript function to open the modal, and use function parameters to pass in the modal id or class name at javascript runtime, to activate the modals that way, so you can reuse the code for different modals.

I hope that helps, cheers, Dave


#89

I hoped there would be a possibility with 'nesting', 'subclasses' or a script with 'this'.
Has no one done that before?


#90

Hi @keetmeester, you could probably pass 'this.' current element into a function that manipulates the modal window, you just would have to play around with the code.

The main thing is, in the jquery that fades in and fades out the modal, you reference each element by it's unique id or class name. If you need more than one modal, you will need code for each modal and update the class names or id for each modal window and modal link in the script.


#91

I will do my utmost wink
Thanks a lot. Will let you know if I succeeded.