In addition to manually creating modals with modal plugin tags, Modals also allows you to automatically open certain links or images in modal popups, thanks to the "Auto-Convert" options in the Modals plugin settings.

The Free version of Modals only supports converting links by class names. All the other options below are features exclusive to the Pro version.

Links

Class names

By enabling this option, all links with one of the given class names will be converted to modal popups.

The default class name that will be auto-converted is modal, but you can change that and give a comma-separated list of class names which Modals should handle and convert to modal popups.

Example: Link automatically converted

<a href="/sample-articles/my-article" class="modal">Link automatically converted</a>

External Links PRO

By enabling this option, all links to external sites will be converted to modal popups.

Example: Link automatically converted

<a href="https://www.openstreetmap.org/export/embed.html?bbox=-4.581298828125001%2C48.94415123418794%2C13.765869140625002%2C54.95238569063361&layer=mapnik">Link automatically converted</a>

Target Blank PRO

By enabling this option, all links that are set to open in a new window (with a target="_blank" attribute), will be opened in a modal popup instead.

Example: Link automatically converted

<a href="/sample-articles/my-article" target="_blank">Link automatically converted</a>

Filetypes PRO

By enabling this option, all links to files that match one of the given filetypes will be converted to modal popups.

You can give a comma-separated list of filetypes which Modals should handle and convert to modal popups.

URL matches PRO

By enabling this option, all links that match certain URLs will be converted to modal popups.

If you - for instance - want all links to pages containing the word shop to open in a modal popup, simply enter that in the URL matches field.

Or enter some-other-website.com/ to open all external links to some-other-website.com in your website.

Use a new line for each different match. For even more control, you can also create URL matching rules using Regular Expressions.

Images PRO

With the Pro version of Modals you can also automatically convert certain images to modal popups, by simply giving one of your specified class names to the img tag.

The default class name that will be auto-converted is modal, but you can change that in the Modals plugin settings and give a comma-separated list of class names which Modals should handle and convert to modal popups.

When auto-converting an image to a modal popup, Modals will display a thumbnail as clickable link to the image modal.

Thumbnail dimensions

By default, the dimensions of the automatically created thumbnail will be based on your default settings. However, you can also individually customize the width and height of the thumbnail for each specific image, by using the width and height attributes in the img tag:

Example:

<img src="/images/fruit/bananas.jpg" class="modal" width="100" height="100" />

Note: Modals will also check if the image you placed in the content is already a thumbnail of an image, instead of the actual image. If so, Modals will still work as expected and will output the same result, with the thumbnail shown in the content (as clickable) and the large original image shown in the modal popup.

Title & Description

By default Modals will convert the image filename to a Title, and show it on top of the modal popup.

But you can override the image title with your custom one, as well as an additional description that will display under the title, by using the data-modal-title and data-modal-description attributes in the img tag.

Example: My title for Bananas image

<img src="/images/fruit/bananas.jpg" class="modal" data-modal-title="My title for Bananas image" data-modal-description="Description for Bananas image" />

You can also make Modals use title or alt attributes as a Modal Title & Description, if you enable those options in the Modals plugin settings.