Modal Popup

[TS-VCSC-Spacer height=”20″]

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 anything, even other 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 on page load. The default delay for the auto-open is 0 seconds, which means the popup will open as soon as the page is ready. You can assign a delay of up to 10 seconds, before the auto-popup will be shown.

[TS-VCSC-Modal-Popup content_open=”true” content_open_hide=”true” content_open_delay=”100″ content_trigger=”text” content_text=”View Message” content_tooltip_css=”false” title=”This is a modal popup!” height=”100″ effect=”mfp-with-fade” content_effect=”mfp-with-fade” width=”500″]

Composium_Logo_Preloader

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 500 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=”20″][TS-VCSC-Icon-Title title=”Trigger Options” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”T3B0aW9ucw==” el_file1=”” el_file2=””]

Default Image

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_title=”This is a modal popup” content_tooltip_css=”false” title=”This is a modal popup!” effect=”mfp-with-fade” content_effect=”mfp-with-fade”]videocameracompact

This is a modal popup window. The content can include 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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_trigger=”image” content_image=”16164″ content_title=”This is a modal popup” content_tooltip_css=”false” title=”This is a modal popup!” effect=”mfp-with-fade” content_effect=”mfp-with-fade”]

speedometer

This is a modal popup window. The content can include 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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_trigger=”icon” content_icon=”ts-awesome-eye” content_iconsize=”120″ content_iconcolor=”#2dd100″ content_title=”This is a modal popup!” content_tooltip_content=”Click the icon to view the popup!” title=”This is a modal popup!” height=”100″ effect=”mfp-with-fade” content_effect=”mfp-with-fade” width=”500″]

magicwand

This is a modal popup window. The content can include 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-Spacer height=”20″]

Buttons 1

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_trigger=”winged” content_title=”This is a modal popup” content_subtitle=”Click the button to view the popup” title=”This is a modal popup!” height=”100″ effect=”mfp-with-fade” content_effect=”mfp-with-fade” width=”500″]

flag

This is a modal popup window. The content can include 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″]

calendar

This is a modal popup window. The content can include 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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_trigger=”flaticon” content_icon=”ts-awesome-calendar” content_buttonstyle=”ts-dual-buttons-color-sun-flower” content_buttonhover=”ts-dual-buttons-preview-orange-flat ts-dual-buttons-hover-orange-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″]

calendar

This is a modal popup window. The content can include 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″]

calendar

This is a modal popup window. The content can include 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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_trigger=”text” content_text=”View Message” 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″]

clock

This is a modal popup window. The content can include 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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_trigger=”custom” content_raw=”JTNDYnV0dG9uJTIwY2xhc3MlM0QlMjIlMjIlM0VWaWV3JTIwTWVzc2FnZSUzQyUyRmJ1dHRvbiUzRQ==” content_tooltip_content=”This trigger has been created with custom HTML.” title=”This is a modal popup!” height=”100″ effect=”mfp-with-fade” content_effect=”mfp-with-fade” width=”500″]

email

This is a modal popup window. The content can include 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-Spacer height=”20″][TS-VCSC-Icon-Title title=”Open + Close Effects” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RWZmZWN0cw==” el_file1=”” el_file2=””]

Simple Fade

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”simpleFade” content_title=”Simple Fade” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Swipe & Fade

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”fade” content_title=”Fade” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-zoom-in”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Swipe

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”swipe” content_title=”Swipe” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Scale

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”scale” content_title=”Scale” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-zoom-out”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Slide Up

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”slideUp” content_title=”Slide Up” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-newspaper”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Slide Down

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”slideDown” content_title=”Slide Down” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-newspaper”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

[TS-VCSC-Spacer height=”20″]

Flip

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”flip” content_title=”Flip” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-newspaper”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Skew

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”skew” content_title=”Skew” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-move-horizontal”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Bounce Up

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”bounceUp” content_title=”Bounce Up” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-move-from-top”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Bounce Down

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”bounceDown” content_title=”Bounce Down” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Break In

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”breakIn” content_title=”Break In” content_tooltip_content=”This is a popup with a 3D unfold effect.” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Rotate In

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”rotateIn” content_title=”Rotate In” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

[TS-VCSC-Spacer height=”20″]

Rotate Out

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”rotateOut” content_title=”Rotate Out” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Hang Left

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”hangLeft” content_title=”Hang Left” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-move-horizontal”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Hang Right

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”hangRight” content_title=”Hang Right” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-move-from-top”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Cycle Up

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”cicleUp” content_title=”Cycle Up” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Cycle Down

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”cicleDown” content_title=”Cycle Down” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Throw In

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”throwIn” content_title=”Throw In” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

[TS-VCSC-Spacer height=”20″]

Fall

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”fall” content_title=”Fall” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Jump

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”jump” content_title=”Jump” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

Zoom In

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_effect=”zoomIn” content_title=”Zoom In” content_tooltip_css=”false” title=”This is a modal popup with effects!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-3d-unfold”]

The modal popup can be opened and closed with 20 different of effects. You can either select a specific effect or just have a random effect.

[/TS-VCSC-Modal-Popup]

[TS-VCSC-Spacer height=”20″]

Color Styles

[TS-VCSC-Divider divider_border_thick=”2″]

Default

[TS-VCSC-Divider][TS-VCSC-Modal-Popup content_title=”Default” content_tooltip_content=”This is a popup with its default color.” title=”This is a modal popup with a color bar!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade”]

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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_backlight_color=”#FFFFFF” content_title=”Neutral” content_tooltip_content=”This is a popup with a neutral color.” title=”This is a modal popup with a color bar!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade” content_style=”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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_backlight_color=”#4CFF00″ content_title=”Success” content_tooltip_content=”This is a popup with a success color.” title=”This is a modal popup with a color bar!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade” content_style=”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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_backlight_color=”#EA5D00″ content_title=”Warning” content_tooltip_content=”This is a popup with a warning color.” title=”This is a modal popup with a color bar!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade” content_style=”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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_backlight_color=”#CC0000″ content_title=”Error” content_tooltip_content=”This is a popup with an error color.” title=”This is a modal popup with a color bar!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade” content_style=”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

[TS-VCSC-Divider][TS-VCSC-Modal-Popup lightbox_backlight_color=”#000000″ content_title=”Error” content_tooltip_content=”This is a popup with an error color.” title=”This is a modal popup with a color bar!” height=”10″ effect=”mfp-newspaper” content_type=”inline” content_effect=”mfp-with-fade” content_style=”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]