Modal Popup

Menu [fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” hundred_percent=”no” class=”” id=””][title size=”1″ content_align=”left” style_type=”” sep_color=”” class=”” id=””]Modal Popup Shortcode[/title][three_fourth 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=””][fusion_text]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][/three_fourth][one_fourth 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=””][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”|” accent_color=”rgba(000,000,000,.7)” accent_hover_color=”” bevel_color=”” border_width=”0px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”avada_modal” animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]Modal Button[/button][/one_fourth][modal name=”avada_modal” title=”Buttons Can Even Open This Awesome Modal Element” size=”large” background=”” border_color=”” show_footer=”yes” class=”” id=””]

Avada’s Humbled History

[separator style_type=”single” top_margin=”15″ bottom_margin=”10″ sep_color=”#cdcdcd” icon=”fa-heart-o” width=”820px” class=”” id=””] test_graphic[/modal][/fullwidth][separator style_type=”single” top_margin=”15″ bottom_margin=”” sep_color=”#cdcdcd” icon=”fa-chevron-down” width=”” class=”” id=””][fullwidth backgroundcolor=”” backgroundimage=”http://theme-fusion.com/avada/wp-content/uploads/2014/03/bg6b_bw.jpg” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”scroll” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”1px” bordercolor=”#eaeaea” borderstyle=”solid” paddingtop=”55px” paddingbottom=”40px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” hundred_percent=”no” class=”” id=””][one_third 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=””][imageframe lightbox=”no” style_type=”none” bordercolor=”” bordersize=”0px” borderradius=”0″ stylecolor=”” align=”none” link=”” linktarget=”_self” animation_type=”0″ animation_direction=”up” animation_speed=”1″ class=”” id=””] shortcodes[/imageframe][separator style_type=”none” top_margin=”18″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][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][separator style_type=”none” top_margin=”5″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”large” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”|” accent_color=”rgba(000,000,000,.7)” accent_hover_color=”” bevel_color=”” border_width=”0px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”modal1″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]Large Modal Sample 1[/button][modal name=”modal1″ title=”Insert Anything You Want In These Modals” size=”large” background=”” border_color=”” show_footer=”yes” class=”” id=””] [counters_circle class=”” id=””] [counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”95″]Text[/counter_circle] [counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”88″]Text[/counter_circle] [counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”80″]Text[/counter_circle] [counter_circle filledcolor=”” unfilledcolor=”#eaeaea” size=”190″ scales=”no” countdown=”no” speed=”1500″ value=”78″]Text[/counter_circle] [/counters_circle] [separator style_type=”single” top_margin=”15″ bottom_margin=”50″ sep_color=”#cdcdcd” icon=”fa-chevron-down” width=”820px” class=”” id=””] [progress percentage=”95″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/progress] [progress percentage=”80″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/progress] [progress percentage=”85″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/progress] [progress percentage=”90″ unit=”%” filledcolor=”” unfilledcolor=”#eaeaea” striped=”yes” animated_stripes=”yes” textcolor=”” class=”” id=””]Text here[/progress] [/modal][/one_third][one_third 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=””][imageframe lightbox=”no” style_type=”none” bordercolor=”” bordersize=”0px” borderradius=”0″ stylecolor=”” align=”none” link=”” linktarget=”_self” animation_type=”0″ animation_direction=”up” animation_speed=”1″ class=”” id=””] shortcodes[/imageframe][separator style_type=”none” top_margin=”18″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][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][separator style_type=”none” top_margin=”5″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”large” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”|” accent_color=”rgba(000,000,000,.7)” accent_hover_color=”” bevel_color=”” border_width=”0px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”modal2″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]Large Modal Sample 2[/button][modal name=”name=”name=”name=”name=”class=”””””” title=”Modal Heading Text Goes Here” size=”large” background=”” border_color=”” show_footer=”yes” class=”” id=””] 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.[/modal][/one_third][one_third 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=””][imageframe lightbox=”no” style_type=”none” bordercolor=”” bordersize=”0px” borderradius=”0″ stylecolor=”” align=”none” link=”” linktarget=”_self” animation_type=”0″ animation_direction=”up” animation_speed=”1″ class=”” id=””] shortcodes[/imageframe][separator style_type=”none” top_margin=”18″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][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][separator style_type=”none” top_margin=”5″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”large” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”|” accent_color=”rgba(000,000,000,.7)” accent_hover_color=”” bevel_color=”” border_width=”0px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”modal3″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]Small Modal Sample[/button][modal name=”name=”name=”name=”name=”class=”””””” title=”Modal Heading Goes Here” size=”small” background=”” border_color=”” show_footer=”yes” class=”” id=””]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.[/modal][/one_third][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”scroll” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”65px” paddingbottom=”15px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” hundred_percent=”no” class=”” id=””][one_third 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=””][tagline_box backgroundcolor=”” shadow=”no” shadowopacity=”0.1″ border=”1px” bordercolor=”” highlightposition=”top” content_alignment=”left” link=”” linktarget=”_self” modal=”” button_size=”small” button_shape=”square” button_type=”flat” buttoncolor=”” button=”” title=”Custom Options” description=”Select large or small popup, control background color, border color and show or hide the footer with button” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””][/tagline_box][separator style_type=”none” top_margin=”-30″ bottom_margin=”-30″ sep_color=”” icon=”” width=”” class=”” id=””][/one_third][two_third 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=””][separator style_type=”none” top_margin=”20″ bottom_margin=”20″ sep_color=”” icon=”” width=”” class=”” id=””][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”|” accent_color=”rgba(000,000,000,.7)” accent_hover_color=”” bevel_color=”” border_width=”0px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”modal4″ animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]Change Popup Colors[/button][fusion_text][/fusion_text][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”default” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”|” accent_color=”rgba(000,000,000,.7)” accent_hover_color=”” bevel_color=”” border_width=”0px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”no_footer” animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]Show or Hide Footer[/button][/two_third][modal name=”name=”name=”name=”name=”class=”””””” title=”Custom Color For This Modal Popup” size=”small” background=”#333333″ border_color=”#3e3e3e” show_footer=”yes” class=”” id=””]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.[/modal][modal name=”no_footer” title=”Show or hide The Footer In The Popup” size=”large” background=”” border_color=”” show_footer=”no” class=”” id=””]

Avada’s Humbled History

[separator style_type=”single” top_margin=”15″ bottom_margin=”10″ sep_color=”#cdcdcd” icon=”fa-heart-o” width=”820px” class=”” id=””] test_graphic[/modal][/fullwidth][separator style_type=”single” top_margin=”5″ bottom_margin=”0″ sep_color=”#cdcdcd” icon=”fa-chevron-down” width=”” class=”” id=””][fullwidth backgroundcolor=”” backgroundimage=”http://theme-fusion.com/avada/wp-content/uploads/2013/07/bkgd13.jpg” backgroundrepeat=”no-repeat” backgroundposition=”top left” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”1px” bordercolor=”#c6c6c6″ borderstyle=”” paddingtop=”25px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” hundred_percent=”no” class=”” id=””][two_third 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=””][fusion_text]

Join The 70,000+ Satisfied Avada Users!

[/fusion_text][/two_third][one_third 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=””][separator style_type=”none” top_margin=”7″ bottom_margin=”7″ sep_color=”” icon=”” width=”” class=”” id=””][fusion_text]

[/fusion_text][button link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion” color=”custom” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”rgba(255, 255, 255, 0.15)|” accent_color=”rgba(0,0,0,.5)” accent_hover_color=”#333333″ bevel_color=”” border_width=”2px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”” animation_type=”bounce” animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””]I’M SOLD, BUY AVADA NOW![/button][fusion_text] [/fusion_text][/one_third][/fullwidth]


On Pinterest
Follow PRIDE Foundation Malaysia's board Pink Ribbon Deeds on Pinterest.