Modal Modal icon

Act3 Modal preview

Use case:
Open content in a window that was initially hidden from the page. Great to provide more information about an item, a confirmation screen, a call to action, etc.
Page speed impact:
Low initially — it depends a lot on the type and amount of content you add. It may have a medium or even high impact with the Form or Subscribe options, or if you add heavy resources (large images without lazy loading, videos, call-to-action, etc).
Available in pages:
No, but already included by default with all templates, both as an in-page editable module and global content.
Reserved block class:
modal
Resources:
css/components/modal.css
js/components/modal.js
Available starting with Version 11. If you are using a child theme please read the important note here.

Live examples

Adding a modal

To add a modal, edit your page and go to the Contents tab:

Act3 HubSpot Theme - Page modals

There are two modules available: Page modals and Global modals.

Use the Page modals to add modals that are only available to the current page (e.g., team members on an About page). Or use the Global modals for modals that you want to open from any page, such as modals that can be triggered by a button in the header, or footer, etc.

Please do not add modals you are not going to use globally to the Global modals, because that will only make all your pages heavier for no reason.

Specify a unique Custom ID for your modal (no other element on the page must have this ID). For example, john-doe

Act3 HubSpot Theme - Modal custom ID

Opening a modal

You will use the Custom ID you specified above within an onclick field with a simple function to open your modal, like so:

open_modal('john-doe')

Act3 HubSpot Theme - Open modal function

javascript:;

Act3 - Link URL - JavaScript

Please note that HubSpot may show a warning that this is not a valid URL, but it's perfectly acceptable and common practice when JavaScript handles the link action. You can perfectly use it — that's just a warning, unjustified in this case.

HubSpot Call-to-Action buttons redirect the browser to a tracking domain first and only then to the target page, so they cannot open these modals. This only works with regular links/buttons.

Note: All module links in Act3 have onclick fields starting with Version 10.

Closing a modal

If you want to close your modal from a button or link within the modal window (for example, a Cancel button), you can use use the onclick field/attribute to call a simple function like this:

close_modal('john-doe')

Act3 HubSpot Theme - Close modal function

Same as before, consider adding this to your link External URL:

javascript:;

Act3 - Link URL - JavaScript

You can group modals in a gallery — where the user can browse through all the modals with prev/next arrows/keys — by adding the same Group ID to all modals you want in that gallery. For example, add our-team Group ID to your team member modals on your About page:

Act3 HubSpot Theme - Modal gallery example

Adding a video, audio or iframe to your modal (advanced)

Please refer to our Lightbox documentation if you just want to open an image or video in a popup window. That may be better suited for this use-case. The modal, however, may be helpful if you don't want your video to autoplay or you need to add additional content along with it, such as a title, description, etc.

In case you want to add YouTube, Vimeo, or other iframes to your modal, we recommend modifying your embed code to replace the src attribute with data-src, and adding this class to your iframe: modal__iframe. This way your iframe is lazy-loaded and won't add to the page loading time.

Here is an example of a YouTube embed code with the mentioned attribute, class, and the autoplay parameter at the end of the YouTube URL. The video will only play when the modal is open, and will stop playing when closing the window. You can compare this with your embed code and change it accordingly to obtain the same functionality. You can check the differences here.

Before (YouTube original embed code):

<iframe width="560" height="315" src="https://www.youtube.com/embed/qDCyvvdzND4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

After (modified YouTube embed code):

<iframe class="modal__iframe" width="560" height="315" data-src="https://www.youtube.com/embed/qDCyvvdzND4?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Here is the Live example

If you have a <video> or <audio> HTML element you want to autoplay only when the modal is open, you can add this class to that element: modal__media and instead of an autoplay attribute, use data-autoplay.

Here is an example:

<video width="430" height="242" style="width: 100%; height: auto;" class="modal__media" src="https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/videos/sample-1293jmdsm.mp4" controls preload="metadata" data-autoplay></video>