(NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information.)

The Modal shortcode allows you to pop up information, an image, or other things after clicking on a button. You can also set it to work by clicking on text if you use the Text Modal Link shortcode.

Click the button below to see an example.

Click for Modal

As mentioned, you can also pop up images or other content from other shortcodes. Here's an example of an image.

Click for Image

In order to achieve this popup, you need to use two different shortcodes. You need the Modal shortcode (this is where you insert your content). And you need to use the Button shortcode.

For the Modal shortcode, this is the settings page. The 3 most important areas are the modal name, the heading, and the content box.

modal-settings

 

When you insert the Button shortcode, you connect it to the content in your modal by inserting the name of your modal in the correct box. For example, I gave my modal the name "mymodal," and so that's what I put in the box in the button settings.

modal-button-settings

 

If you would like to pop up an image (or something), then insert that image (or whatever you're popping up) into the content area. For example, in this sample shortcode below, you would insert your image where you see "This is the content."

 

Here are the properties:

  • name = give you modal a unique name
  • title = insert the heading for your popup
  • size = small, large
  • background = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • border_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • show_footer = yes, no
  • Insert the content you'd like, including images or other shortcodes, between the opening and closing shortcodes.