Modals

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.

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]

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]

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”]

[/ultimate_modal]

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]

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]

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]

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.