Crowdfunding Page - SASS, Vue.js

Community feedback

• 

  Vinh Nhan•160

  @vinhyanPosted over 3 years ago

  Looks awesome! How did you make the modal show a specific position when open? i.e. when you click on Black Edition Stand reward, the modal opens automatically scrolling down to its position?

  0

  ---

  

  P

  Richard Cyrus•465

  @richardcyrusPosted over 3 years ago

  @vinhyan In the Vue.js code, I added a reference (ref='name') to each of the reward input section divs, then when the modal is opened, I call the scrollIntoView() JavaScript function on that reference. Look at the openPledgeModal() function in my code, and look for the associated ref in the source HTML. Clicking a specific button also changes styles and makes the radio button :checked using the v-model pledgeChoice value.

  0

  

  Vinh Nhan•160

  @vinhyanPosted over 3 years ago

  @richardcyrus I see thank you for sharing!

  0
• 

  Sunny78inator•60

  @prathyushSunnyPosted over 3 years ago

  Hey that's a really beautiful project! You executed it neatly!

  I have one question though. Is there any way that we could temporarily terminate the scrolling on the main page when the 'Back this project' window pops up? I have a similar project and im not able to do the same. I tried making the the position 'fixed' to the main page when that scenario occurs, that works, but also scrolls my page all the way to the top.

  Do share your thought on this if you possibly have any info. Thankyou!

  0

  ---

  

  P

  Richard Cyrus•465

  @richardcyrusPosted over 3 years ago

  @prathyushSunny Thanks for the feedback. I'm not sure I follow what's happening in your case. This was the first time I used the scrollIntoView behavior. I applied the scroll behavior to the input for each reward amount. My main page does not scroll by default when the modal is active, the modal scrolls (it's still possible to scroll the main page on a tall view port). My modal overlay is position fixed and the modal content scrolls on top of that.

  0

  

  Vinh Nhan•160

  @vinhyanPosted over 3 years ago

  @prathyushSunny Hey! Thought I would share what I know since I've just done the same project.

  To stop the main page from scrolling when the modal is open, I made the body element overflow: hidden by creating a class modal-on. Then in JS, I added this class on the body when your modal is open (usually in the same 'click' event callback function) and of course remove modal-on class when the modal is closed to keep the main page scrollable again. Hope it makes sense.

  Feel free to check out my work and let me know if you need any help!

  0