Shortcode Modal Plugin

The Shortcode Modal plugin provides shortcodes to display simple modal popups on any Grav CMS based website. To see a demonstration of the plugin in action, see the examples below.

For full details of the plugin, including information on how to add it to your Grav site, see the GitHub project page.

Example 1

In simplest form, use the modal shortcode to define content to show in the modal and the modal-launch shortcode to create a link to launch it.

[modal name="example1"] 

Hello, World!

[/modal]

[modal-launch modal="example1"]Launch Modal[/modal-launch]

Result

Launch Modal

Example 2

Classes can be added to the launch link so that it can be styled as a button etc. The classes you'll need to add will be dependent on what is provided by your theme.

[modal name="example2"] 

Hello, World!

[/modal]

[modal-launch modal="example2" classes="btn btn-primary btn-lg"]Launch Modal[/modal-launch]

Result

Launch Modal

Example 3

Markdown and other shortcodes can be used in the modal content.

[modal name="example3"] 

# Mmmm... bacon

![Image](https://baconmockup.com/640/360)

[notice]
Please eat bacon responsibly
[/notice]

[/modal]

[modal-launch modal="example3" classes="btn btn-primary btn-lg"]Launch Modal[/modal-launch]

Result

Launch Modal

Example 4

Markdown and shortcodes can be used in the launch links too so, for example, you can specify a Font Awesome icon to use.

[modal name="example4"] 

Hello, World!

[/modal]

[modal-launch modal="example4"][fa icon=fa-life-buoy extras=fa-4x /][/modal-launch]

Result