Click Modal shortcode for WordPress

The Click Modal shortcode for WordPress can be used to display a popup/modal with a specific message or banner when an element is clicked. This can be used to provide extra info or reveal hidden content at the tap of click. Check below for example implementations and shortcode documentation:

Click Modal Examples

Click for info

Click Modal Shortcodes

Click Modal Shortcode

[x3m-clickmodal message="extra-info" maxwidth="600px" ratio="16:9"] Click for info [/x3m-clickmodal]

The shortcode can be used to add a click to launch modal to any element on your website (text, button, image..) simply by wrapping the element in the Click Modal shortcodes. This will launch a pop-up modal with customizable content in the folder templates/clickmodal. Above example displays a modal with content loaded from the “extra-info.html” file. The modal is non-intrusive.

Click Modal Documentation

Here are the shortcode option settings available for Click Modal:

Shortcode Settings	Details
message=”extra-info”	used to set which message to be displayed in the popup modal. X3M Shortcodes plugin includes a templates/clickmodal/ folder. In this folder you can create other basic html files with your own content to be displayed. Use the name of the file in the message=”” setting, without including .html
maxwidth=”600px”	this sets the maximum width of the modal, in pixel value (ex “600px”). The modal is responsive should the screen size require smaller width.
ratio=”16:9″	This is used to set the modal ratio. It will adjust its view based on previously set width as well.
button-style=”1″ optional	used to make the text wrapped by the click modal shortcodes show as button. The value accepted are from to to 10, and it sets the button to show based on styles from the button shortcode.
button-background=”red” optional	used in conjunction with “button-style”. It is used to set the background color of the button. Color names or HEX color codes can be used to set the desired color.
button-text-color=”white” optional	used in conjunction with “button-style”. It is used to set the text color of the button. Color names or HEX color codes can be used to set the desired color.