CMS Development

IAM
Contributor | Partner
Contributor | Partner

Modal Pop Up Team Member

SOLVE

I am trying to develop a team member module with a pop up module box. Here is a preview link to what I have so far.

 

https://www.ascensionrs.com/meet-the-team.html-0?hs_preview=rnYVFdbD-6734615586

 

Is there a way to link the entire module including image to link to pop up instead of just a button that says learn more. More like this example here as the entire module links to the pop up:  http://www.hubmate.co/keynote/team-popup-form

 

Thanks in advance for any feedback!

0 Upvotes
1 Accepted solution
cbarley
Solution
HubSpot Alumni
HubSpot Alumni

Modal Pop Up Team Member

SOLVE

Hi @IAM, there was a simple syntax error where there was a space in the `modal:open` attribute (my reply had the spaces so that was my fault). I removed them and the popup now works 🙂 

View solution in original post

7 Replies 7
LRGramos
Member | Partner
Member | Partner

Modal Pop Up Team Member

SOLVE

I need this same solution is there a tutorial somewhere on this?

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Modal Pop Up Team Member

SOLVE

Hi @LRGramos 

Are you looking for a general tutorial on how to make a popup? 

Here is a possible tutorial for you.

I do not believe there is a HubSpot specific tutorial, but I will add it to my list to look into 😀

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Modal Pop Up Team Member

SOLVE

Hey @IAM, you should be able to simply wrap your entire .wcs section with your anchor link in your custom module here: https://app.hubspot.com/beta-design-manager/4306058/modules/6734713196

 

Your code from lines 1-10 would look like this:

 

<a class="wcs-cta-button" href="#tmp{{ name }}" rel="modal : open">
 <div class="wcs">
<div class="wcs-col-12 wcs-pop-the-form" style="background-color: {{ module.background_color.color }}">
<div class="wcs-col-12 wcs-page-center">
{% inline_rich_text field="callout_text" value="{{ module.callout_text }}" %}
</div>
</div>
</div>
</a>
0 Upvotes
carolina19
Member

Modal Pop Up Team Member

SOLVE

I have a problem with this pop up, I create a Landing Page and make a pop up with a form, but the form doesn´t appeare.

I put the same in another part of the page and It shows completely but in the other is hidden.

HelpCaptura de pantalla 2019-05-15 a la(s) 22.18.01.png

IAM
Contributor | Partner
Contributor | Partner

Modal Pop Up Team Member

SOLVE

Thank you for the response. I tried that, but something appears to be conflicting because the pop up module doesn't show up now.

 

https://www.ascensionrs.com/meet-the-team.html-0?hs_preview=rnYVFdbD-6734615586

 

Thoughts? Thank you in advance!

0 Upvotes
cbarley
Solution
HubSpot Alumni
HubSpot Alumni

Modal Pop Up Team Member

SOLVE

Hi @IAM, there was a simple syntax error where there was a space in the `modal:open` attribute (my reply had the spaces so that was my fault). I removed them and the popup now works 🙂 

IAM
Contributor | Partner
Contributor | Partner

Modal Pop Up Team Member

SOLVE

Thank you cbarley! That worked. 🙂