Modal Madness is a free WordPress plugin that allows you to add many different types of modals or popups to your WordPress website.

Modal Madness Version 1.0 and 2.0 allow you to add an image, video, or a custom HTML popup to your Salient powered WordPress website. Specific Modal Madness Version 1 Documentation is provided below:

Video Popups

For Modal Madness Version 1.0, make sure to use the youtube.com/embed/{video_id} format and add iframe=true to the end of your YouTube embed URL. iframe is a query string variable with a value equal to true, so the end of the YouTube embed URL will either be ?iframe=true (if no query string variables exist) or &iframe=true (if existing query string variables exist). Any YouTube video that will show up in an iframe must be set up in this way, otherwise, you will run into issues where the video doesn’t actually show up in the popup. Click on the Launch Modal Button below to see what it looks like to have a video in the popup.

Launch YouTube Modal

You can also launch this modal automatically when the page or post loads. You do this by adding the show_on_load attribute to the shortcode.
[modal_madness show_on_load="true" youtube="https://youtu.be/tnBQmEqBCY0" link_text="Launch Modal"][/modal_madness]

Custom HTML Popups

You can add custom HTML into your popup in the same way for Modal Madness Version 1.0 and 2.0. You simply add the HTML within the shortcode, an example is provided below:
[modal_madness link_text="Launch Modal" content_id="mm_inline_2" class="mfp-inline"]<h1 style="">Custom Content</h1><p style="">Lorem epsum. I am random filler content</p>[/modal_madness]

IMPORTANT: Make sure to set the class attribute like in the example above, ie class=”mfp-inline”, otherwise you might get an annoying error saying “The image could not be loaded.”

If you would like multiple popups on one page, you need to set the content_id attribute on the shortcode to a different value from each (totally unique to each modal and to every other element on the page). So, we recommend using the mm_inline prefix and use _1 or _2 or _3 so that you have unique modal content for each instance.

Here’s an example of a popup with custom HTML in action:

Launch Custom HTML Popup

Image Popups

In Modal Madness version 1.0, you have to add the img HTML element within your Modal Madness opening and closing shortcode tags. See the below as an example:

[modal_madness link_text="Launch Image Popup" content_id="mm_inline_22"]
<img src="https://blog.wplauncher.com/wp-content/uploads/2014/12/rocky-lagoon-small-image.jpg" alt="" class="aligncenter size-full wp-image-2026" />[/modal_madness]

For Modal Madness version 2.0, you just set the image attribute on the shortcode.

Click on the button below to see the image modal in action:
Launch Image Popup

Important note: the design of your popup will appear differently on your site than it does on ours, as your stylesheet is different than ours.

Do you want to grow your email list with Modal Madness? The following post walks you through how to include a newsletter subscription form in your modal, send your users a free gift after they subscribe (like we’re doing with the button above). Check out this post for information on how to build your email list for free with the Modal Madness plugin and MailChimp.