Modals – EJONA

Modals Shortcodes

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Toggle a modal via JavaScript by clicking the button below. You can build with Ultimate Addons Modal shortcodes.

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Default

[ultimate_modal modal_title=”Default Modal Title” btn_size=”lg” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Default Modal” modal_size=”medium” modal_style=”overlay-zoomin” overlay_bg_color=”” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix” header_text_color=”” btn_txt_color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.[/ultimate_modal]

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Optional Sizes

[ultimate_modal modal_title=”Large Modal Title” btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Large Modal” modal_size=”container” modal_style=”overlay-zoomin” overlay_bg_color=”” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ header_text_color=”” btn_txt_color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

[ultimate_modal modal_title=”Medium Modal Title” btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Medium Modal” modal_size=”medium” modal_style=”overlay-zoomin” overlay_bg_color=”” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ header_text_color=”” btn_txt_color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

[ultimate_modal modal_title=”Small Modal Title” btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Small Modal” modal_style=”overlay-zoomin” overlay_bg_color=”” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ header_text_color=”” btn_txt_color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

[ultimate_modal modal_title=”Block Modal Title” btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Block Modal” modal_size=”block” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix” btn_txt_color=”#ffffff”] device

[/ultimate_modal]

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

With Form

[ultimate_modal btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Form Modal” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix” btn_txt_color=”#ffffff”]

Error: Contact form not found.

[/ultimate_modal]

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

With Video

[ultimate_modal modal_title=”Vimeo Embed” modal_contain=”ult-vimeo” btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Video Modal” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix” btn_txt_color=”#ffffff”][/ultimate_modal]

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

With Google Map

[ultimate_modal modal_title=”Google Maps” btn_size=”md” btn_bg_color=”#0088cc” modal_on_align=”left” btn_text=”Launch Google Map Modal” modal_size=”block” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix” btn_txt_color=”#ffffff”][/ultimate_modal]

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Display on Image

[ultimate_modal modal_title=”Google Maps” modal_on=”image” btn_img=”id^72|url^http://sw-themes.com/porto_dummy/wp-content/uploads/2016/06/pin.png|caption^null|alt^null|title^pin|description^null” modal_on_align=”left” modal_size=”block” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix”][/ultimate_modal]

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Display on Text

[ultimate_modal modal_title=”Launch Modal on Text” modal_on=”text” modal_on_align=”left” read_text=”Launch Modal on Text” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”1″ modal_border_color=”” modal_border_radius=”6″ el_class=”clearfix” txt_color=”#0088cc”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.