Modal Popup Shortcode
Avada includes an incredible modal popup that can be used to show additional content on a page. It can be triggered by a button, text link or an image. Use any of our other shortcodes inside of it as well. These are perfect for catching your viewers eye and displaying extra content on your site.
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” borderstyle=”solid” paddingtop=”0px” paddingbottom=”60px” equal_height_columns=”no” hundred_percent=”no”][fusion_builder_row][fusion_builder_column type=”1_3″ layout=”1_3″ last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_imageframe lightbox=”no” style_type=”none” bordersize=”0px” borderradius=”0″ align=”none” linktarget=”_self” animation_type=”0″ animation_direction=”up” animation_speed=”1″]
[/fusion_imageframe][fusion_separator style_type=”none” top_margin=”18″ /][fusion_text]
Large Modal Sample 1
Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rems uns sadips.[/fusion_text][fusion_separator style_type=”none” top_margin=”5″ /][fusion_button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”large” type=”flat” shape=”round” target=”_blank” button_gradient_top_color=”rgba(255,255,255,0)” button_gradient_bottom_color=”rgba(255,255,255,0)” accent_color=”rgba(000,000,000,.7)” border_width=”0px” shadow=”no” icon_position=”left” icon_divider=”yes” modal=”modal1″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center”]Large Modal Sample 1[/fusion_button][/fusion_builder_column][fusion_builder_column type=”1_3″ layout=”1_3″ last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_imageframe lightbox=”no” style_type=”none” bordersize=”0px” borderradius=”0″ align=”none” linktarget=”_self” animation_type=”0″ animation_direction=”up” animation_speed=”1″] [/fusion_imageframe][fusion_separator style_type=”none” top_margin=”18″ /][fusion_text]
Large Modal Sample 2
Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rems uns sadips.[/fusion_text][fusion_separator style_type=”none” top_margin=”5″ /][fusion_button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”large” type=”flat” shape=”round” target=”_blank” button_gradient_top_color=”rgba(255,255,255,0)” button_gradient_bottom_color=”rgba(255,255,255,0)” accent_color=”rgba(000,000,000,.7)” border_width=”0px” shadow=”no” icon_position=”left” icon_divider=”yes” modal=”modal2″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center”]Large Modal Sample 2[/fusion_button][/fusion_builder_column][fusion_builder_column type=”1_3″ layout=”1_3″ last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_imageframe lightbox=”no” style_type=”none” bordersize=”0px” borderradius=”0″ align=”none” linktarget=”_self” animation_type=”0″ animation_direction=”up” animation_speed=”1″] [/fusion_imageframe][fusion_separator style_type=”none” top_margin=”18″ /][fusion_text]
Small Modal Sample
Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rems uns sadips.[/fusion_text][fusion_separator style_type=”none” top_margin=”5″ /][fusion_button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”large” type=”flat” shape=”round” target=”_blank” button_gradient_top_color=”rgba(255,255,255,0)” button_gradient_bottom_color=”rgba(255,255,255,0)” accent_color=”rgba(000,000,000,.7)” border_width=”0px” shadow=”no” icon_position=”left” icon_divider=”yes” modal=”modal3″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center”]Small Modal Sample[/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_mute=”yes” video_loop=”yes” fade=”yes” bordersize=”0px” bordercolor=”#eaeaea” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” equal_height_columns=”no” hundred_percent=”no”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_text]
Custom Options
Select large or small popup, control background color, border color and show or hide the footer with button
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” borderstyle=”solid” paddingtop=”30px” paddingbottom=”60px” equal_height_columns=”no” hundred_percent=”no”][fusion_builder_row][fusion_builder_column type=”1_2″ layout=”1_2″ last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”xlarge” type=”flat” shape=”round” target=”_blank” button_gradient_top_color=”rgba(255,255,255,0)” button_gradient_bottom_color=”rgba(255,255,255,0)” accent_color=”rgba(000,000,000,.7)” border_width=”0px” shadow=”no” icon_position=”left” icon_divider=”yes” modal=”modal4″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center”]Change Popup Colors[/fusion_button][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”xlarge” type=”flat” shape=”round” target=”_blank” button_gradient_top_color=”rgba(255,255,255,0)” button_gradient_bottom_color=”rgba(255,255,255,0)” accent_color=”rgba(000,000,000,.7)” border_width=”0px” shadow=”no” icon_position=”left” icon_divider=”yes” modal=”modal5″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center”]Show or Hide Footer[/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” equal_height_columns=”no” hundred_percent=”no”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_text]Complete Set of Options
Every option and description included with the alert shortcode is listed below.
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” borderstyle=”solid” paddingtop=”30px” paddingbottom=”80px” equal_height_columns=”yes” hundred_percent=”no”][fusion_builder_row][fusion_builder_column type=”1_2″ layout=”1_2″ last=”no” spacing=”yes” background_color=”#f8f8f8″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”1px” border_color=”#eaeaea” border_style=”solid” padding=”30px” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_checklist icon=”fa-check” iconcolor=”#333333″ circle=”no” size=”small”][fusion_li_item icon=””]name – The unique identifier you give the modal to trigger it via button, text link or image.[/fusion_li_item][fusion_li_item icon=””]title – The heading title text you want to display.[/fusion_li_item][fusion_li_item icon=””]size – Can be one of these values: large, or small. Sets the size of the modal.[/fusion_li_item][fusion_li_item icon=””]background – Accepts a hexcode ( #000000 ). Sets the modal’s background color. Leave Blank for Theme Option selection.[/fusion_li_item][/fusion_checklist][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ last=”yes” spacing=”yes” background_color=”#f8f8f8″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”1px” border_color=”#eaeaea” border_style=”solid” padding=”30px” class=”” id=”” min_height=”” hover_type=”none” link=”” border_position=”all”][fusion_checklist icon=”fa-check” iconcolor=”#333333″ circle=”no” size=”small”][fusion_li_item icon=””]border_color – Accepts a hexcode ( #000000 ). Sets the modal’s border color. Leave Blank for Theme Option selection.[/fusion_li_item][fusion_li_item icon=””]show_footer – Can be one of these values: yes, or no. This is to show or hide the footer.[/fusion_li_item][fusion_li_item icon=””]class – Add a custom class to the wrapping HTML element for further css customization.[/fusion_li_item][fusion_li_item icon=””]id – Add a custom id to the wrapping HTML element for further css customization.[/fusion_li_item][/fusion_checklist][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”https://www.jacobsvendsen.dk/wp-content/uploads/2017/11/home_slider.jpg” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”” video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”50px” padding_right=”” padding_bottom=”80px” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none” last=”no” hover_type=”none” link=”” border_position=”all”][fusion_text]Join The 100,000+ Satisfied Avada Users!
[/fusion_text][fusion_button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”custom” size=”xlarge” type=”flat” shape=”round” target=”_blank” button_gradient_top_color=”rgba(255,255,255,.1)” button_gradient_bottom_color=”rgba(255,255,255,.1)” button_gradient_top_color_hover=”rgba(255, 255, 255, 0.25)” button_gradient_bottom_color_hover=”rgba(255, 255, 255, 0.25)” accent_color=”rgba(255,255,255,.8)” accent_hover_color=”#ffffff” border_width=”2px” shadow=”no” icon_position=”left” icon_divider=”yes” animation_type=”fade” animation_direction=”up” animation_speed=”1″ alignment=”center”] BUY AVADA NOW![/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none” last=”no” hover_type=”none” link=”” border_position=”all”][fusion_modal name=”modal1″ title=”Insert Anything You Want In These Modals” size=”large” show_footer=”yes”] [fusion_counters_circle class=”” id=””] [fusion_counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”95″]Text[/fusion_counter_circle] [fusion_counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”88″]Text[/fusion_counter_circle] [fusion_counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”80″]Text[/fusion_counter_circle] [fusion_counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”78″]Text[/fusion_counter_circle] [/fusion_counters_circle] [fusion_separator style_type=”single solid” top_margin=”15″ bottom_margin=”50″ sep_color=”#cdcdcd” icon=”fa-chevron-down” width=”820px” class=”” id=””/] [fusion_progress percentage=”95″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/fusion_progress] [fusion_progress percentage=”80″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/fusion_progress] [fusion_progress percentage=”85″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/fusion_progress] [fusion_progress percentage=”90″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/fusion_progress] [/fusion_modal][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none” last=”no” hover_type=”none” link=”” border_position=”all”][fusion_modal name=”modal2″ title=”Modal Heading Text Goes Here” size=”large” show_footer=”yes”][fusion_youtube id=”hsEUBLIJvmE” width=”880″ height=”504″ autoplay=”no” api_params=”” class=””/] Sed convallis varius lectus at volutpat. Mauris fringilla dictum risus. Pellentesque neque tortor, malesuada in posuere ac, commodo et nisl. Vivamus massa turpis, porttitor scelerisque bibendum vel, eleifend sed neque. In elementum, magna et porta viverra, metus nunc lacinia diam, eget vehicula risus augue in odio. Nullam sed neque erat. Integer eget tincidunt dolor, et fringilla justo. Sed eget nisi accumsan urna pulvinar fermentum a quis nunc. Fusce ornare urna quis purus dapibus bibendum. Integer lacus elit, malesuada quis dui vel, vulputate tempor est. Pellentesque a quam elementum, blandit leo varius, laoreet mi. Aliquam vestibulum nisl eu tortor malesuada auctor. Duis in enim ornare, convallis metus in, posuere justo. Sed ac odio egestas, ultricies dui non, malesuada nibh. Donec vel massa et purus rutrum luctus. Quisque fermentum ornare fermentum. Morbi sit amet dui volutpat, vehicula metus ut, volutpat enim. Cras a mauris posuere, sagittis justo nec, aliquam leo.[/fusion_modal][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none” last=”no” hover_type=”none” link=”” border_position=”all”][fusion_modal name=”modal3″ title=”Modal Heading Goes Here” size=”small” show_footer=”yes”]Sed convallis varius lectus at volutpat. Mauris fringilla dictum risus. Pellentesque neque tortor, malesuada in posuere ac, commodo et nisl. Vivamus massa turpis, porttitor scelerisque bibendum vel, eleifend sed neque. In elementum, magna et porta viverra, metus nunc lacinia diam, eget vehicula risus augue in odio. Nullam sed neque erat. Integer eget tincidunt dolor, et fringilla justo.[/fusion_modal][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none” last=”no” hover_type=”none” link=”” border_position=”all”][fusion_modal name=”modal4″ title=”Custom Color For This Modal Popup” size=”small” background=”#333333″ border_color=”#3e3e3e” show_footer=”yes”]Sed convallis varius lectus at volutpat. Mauris fringilla dictum risus. Pellentesque neque tortor, malesuada in posuere ac, commodo et nisl. Vivamus massa turpis, porttitor scelerisque bibendum vel, eleifend sed neque. In elementum, magna et porta viverra, metus nunc lacinia diam, eget vehicula risus augue in odio. Nullam sed neque erat. Integer eget tincidunt dolor, et fringilla justo.[/fusion_modal][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none” last=”no” hover_type=”none” link=”” border_position=”all”][fusion_modal name=”modal5″ title=”Show or hide The Footer In The Popup” size=”large” show_footer=”no”]Avada’s Humbled History
[fusion_separator style_type=”single solid” top_margin=”15″ bottom_margin=”10″ sep_color=”#cdcdcd” icon=”fa-heart-o” width=”820px” class=”” id=””/]
[/fusion_modal][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]