Big Cartel Theme Support

Shortcodes – Popup links and windows

Shortcodes – Popup links and windows

If you are new to shortcode, please refer to the article An introduction to shortcodes before working with the following instructions.

Simplest Form

[[popup name="My custom popup"]]

..My custom content..

[[/popup]]

This shortcode will display its content in a popup window (as a tooltip or modal window, depending upon the options). The content can include HTML.

It is important to note that the above simple form will render any content on its own. It needs either a timer option and/or a corresponding popup link as detailed below.

The [[popuplink]] shortcode creates a link that, when clicked, will pop up the content of a [[popup]] shortcode with a matching name.

Note that a name option must be included on both the [[popuplink]] and [[popup]] shortcode.

In this sentence [[popuplink name="My custom popup"]]click here to read more[[/popuplink]].

[[popup name="My custom popup"]]

Here is the extra details on my sentence.

It can be multiline and include HTML <em>like this</em>.

[[/popup]]

type

The type option can be added to the [[popuplink]] shortcode. Valid values are:

modal
The popup content will load in a modal window
tooltip
The popup content will load in a tooltip

When this option is not included, the default value is tooltip.

In this sentence [[popuplink type="modal" name="My custom popup"]]click here to read more[[/popuplink]].

[[popup name="My custom popup"]]

Here is the extra details on my sentence.

It can be multiline and include HTML <em>like this</em>.

[[/popup]]

timer

The timer option can be added to the [[popup]] shortcode. Valid values are any whole number representing the delay — in milliseconds — before the content automatically pops up in a modal window, for example 30000 (30 seconds).

When this option is not included, the content will not automatically pop up.

Note that the [[popup]] does not require a matching [[popuplink]] when the timer option is set. However, a name value must be set regardless.

[[popup timer="15000" name="My custom auto popup"]]

This content will popup automatically, 15 seconds after the page loads.

[[/popup]]

Once you dismiss a timed notice you will not see it again. It is dismissed permanently. For this reason, you should avoid dismissing it until you have it styled and functioning to your satisfaction.

Changing the name of the notice will make it appear again.

AarcadeShortcodes – Popup links and windows