Popups

There are three types of pop-ups in Act2:

  1. Image
  2. Iframe (video)
  3. Content

Add this class popup-image to your anchor <a> that links to an image (JPEG or PNG).

Open your module's source code panel:

Act2 Page Editor Rich Text Source Code Button

Then find your anchor code that looks like this (starting with <a , ending with </a>):

Act2 Page Editor Rich Text Source Code Panel

And add the class attribute right after the opening <a , separated by empty spaces, like this:

<a class="popup-image" href="...

Act2 Page Editor Rich Text Source Code Popup Image Class

Another method is to add the class to the module directly, but it must contain only the link that points to your image. If you add more links, they will simply not work.

Act2 Template Builder Popup Image CSS Class

This can be used for Vimeo or YouTube videos.

Add the link as before, but in this case the class must be popup-iframe and the link should point to a URL from a YouTube or Vimeo video page:

Act2 Template Builder Rich Text Module Popup Iframe CSS Class

This can be used for popups containing text, forms or other content on your page.

Add the link as before, but in this case the class must be popup-content and the link should point to an ID of an element on that page, preceded by a hash. e.g. #my-popup

Act2 Template Builder Rich Text Source Code Popup Content Class

You can add the popup content at the bottom of your template, before the footer delimiter:

Act2 Template Builder My Popup

If you want your popup content hidden by default (most common) wrap it in a group with the class: hidden

Act2 Template Builder Hidden Group CSS Class

Then add this class to your actual popup: popup-target

Act2 Template Builder My Popup CSS Class

And the same ID you used on your link, without hash:

Act2 Template Builder My Popup CSS Class

The ID must be unique per page and shouldn't start with a digit. Only alpha-numeric characters, _ and - are allowed. e.g. inbound_marketing_2018

Except for the close button, the popup is not styled by default. It's up to you to choose the layout or styles to apply, but here are some utility classes that may help you get started:

popup-target w600 p30 bg-white radius-left radius-bottom-right large-shadow

Act2 Template Builder My Popup CSS styled classes

Act2 My Popup Sample

You can see how we designed other popups on Act21 One-Field Form or Act21 Services I templates.

If you have more content popups and want to group them so the visitor can navigate to the next or previous item, you can add all your modules/groups containing the popup links in a group with this class: popup-group

In this case, the links and modules must not include the popup-content or other popup classes. You can see this in action on Act21 Team II template.

Important note:

The Popup Group works only with the Popup Content. For image and video galleries please see the Advanced Gallery component instead.

Using Act2 with the old Design Manager? Read this documentation.