MODAL POPUP
EASILY CREATE MODAL POPUPS WITH CUSTOM HTML CONTENT
Sometimes, you don’t want to clutter your page with too much information at once but still provide it. Modal popups are one of the best solutions to do just that. The content for each modal popup is initially hidden and will only be shown when you viewer triggers a call to show the popup.
Visual Composer Extensions provides you with multiple options to trigger a popup and the popup content can be almost anything, even other (basic) shortcodes. There are multiple effects to open and close a popup and the popups come in different color patterns to better highlight the content (i.e. warnings, errors, etc.).
It is also possible to automatically open one popup once the page has loaded. The default delay for the auto-open is 0 seconds, which means the popup will open as soon as the page is fully loaded. You can assign a delay of up to 10 seconds, before the auto-popup will be shown.
You can even trigger the modal popup on page load. Of course, you should limit the auto-show popup to one popup per page; any more than that just wouldn’t make any sense.
Also, you can apply a delay of up to 10 seconds to the auto-show popup (this popup had a 1500 ms delay); the delay will start counting from the browsers “Window Load” event in order to ensure that all embedded images are fully loaded.
[/TS-VCSC-Modal-Popup][TS-VCSC-Spacer height=”40″]
POPUP TRIGGER OPTIONS
EASILY CREATE MODAL POPUPS WITH CUSTOM HTML CONTENT
Default Image
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]
Custom Image
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]
Font Icon
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]
Buttons 1
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup][TS-VCSC-Modal-Popup content_trigger=”simple” content_tooltip_content=”This is a trigger button for a popup.” title=”This is a modal popup!” height=”100″ effect=”mfp-with-fade” content_effect=”mfp-with-fade” width=”500″]
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]
Buttons 2
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup][TS-VCSC-Modal-Popup content_trigger=”flat” content_buttonstyle=”ts-dual-buttons-color-alizarin-flat” content_buttonhover=”ts-dual-buttons-preview-pomegranate-flat ts-dual-buttons-hover-pomegranate-flat” content_tooltip_content=”This is a trigger button for a popup.” title=”This is a modal popup!” height=”100″ effect=”mfp-with-fade” content_effect=”mfp-with-fade” width=”500″]
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]
Text
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]
Custom Markup
This is a modal popup window. The content can also include basic shortcodes and any other HTML elements. It is just a hidden element on your page that will be shown when called.
[/TS-VCSC-Modal-Popup]

This modal popup was triggered automatically after you just scrolled to the position on the page it has been embedded in, even if you can see it. Of course, you have the option to still show the popup trigger, even if you are using the in-view auto-open setting.
[/TS-VCSC-Modal-Popup][TS-VCSC-Spacer height=”40″]
BACKLIGHT INDICATORS
EASILY CREATE MODAL POPUPS WITH CUSTOM HTML CONTENT
Default
The modal popup can be styled to account for several events, which will change the color of the top bar to indicate the importance of the popup.
[/TS-VCSC-Modal-Popup]
Neutral
The modal popup can be styled to account for several events, which will change the color of the top bar to indicate the importance of the popup.
[/TS-VCSC-Modal-Popup]
Success
The modal popup can be styled to account for several events, which will change the color of the top bar to indicate the importance of the popup.
[/TS-VCSC-Modal-Popup]
Warning
The modal popup can be styled to account for several events, which will change the color of the top bar to indicate the importance of the popup.
[/TS-VCSC-Modal-Popup]
Error
The modal popup can be styled to account for several events, which will change the color of the top bar to indicate the importance of the popup.
[/TS-VCSC-Modal-Popup]
None / Blank
The modal popup can be styled to account for several events, which will change the color of the top bar to indicate the importance of the popup.
[/TS-VCSC-Modal-Popup]