Modal Box

In this article you will find the unique information about Modal Box shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.

This shortcode is a container. In order to work properly, container shortcodes needs to be filled with items.

Trigger Modal on “Button/link” click:

In “Modal Settings”->General->Appear Frequency->select “On click”, there will appear field on right with generated link, copy it and use as URL in “Button” (or other) shortcode/link. Your pop-up trigger link should start with “#” in order to work.

Examples Of Use:

You can see a beautiful use of Modal Box on one of our pre-made templates: Huito, Nectarine, Pineapple, Yew.

Detailed shortcode description

Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.

GeneralClose ButtonAnimations

Option	Description
Main Preset	Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More »
Appear Frequency	Select how often the modal box should appear for each user viewing this page.
Show On Page Load	Check this to enable modal display on page load. By default modals are displayed when user scrolls to modal position on the page. Enabling this will display modal after page loads.
Appear Delay	Choose delay before the modal shows up.
Maximum Width	Choose maximum width of the modal. Actual width will depends on browser window width.
Maximum Height	Choose maximum height of the modal. Actual height will depends on browser window height.
Position	Choose modal position.
Content Alignment	Choose content alignment.
Overlay – Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Padding	It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Custom Class	Add your custom class to the element. Mostly used for custom CSS/JS.

Option	Description
Button Position	Select close button position. Modal Box: display button in the top-right corner of modal box; Overlay: display button in the top-right corner of overlay.
Close On Overlay	Check to enable close modal on overlay click. Enabling this will let user close modal by clicking anywhere on its overlay.
Main Preset	Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More »
Hover Effect	Select icon hover animation style: Fade: simple fade in effect; Push Out: push out icon with hover icon from selected side.
Icon	Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Padding	It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Hover – Icon	Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Hover – Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Hover – Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Custom Class	Add your custom class to the element. Mostly used for custom CSS/JS.

Option	Description
Enter Animation	Enter Animation allow to specify an appear effect for shortcode. Learn More »
Loop Animation	Loop Animation is enabled only for selected shortcodes/elements. This animation will be played in an endless loop. Learn More »