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:
<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.
<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.