[vc_row max_width=”600″ min_height=”500″ content_placement=”middle” textalign=”align_center” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“mobile_landscape“:{“padding-bottom“:“60“},“tablet_portrait“:{“padding-bottom“:“100“},“desktop“:{“padding-top“:“120“,“padding-bottom“:“140“}}” custom_bg_color=”{“dir“:“135deg“,“from“:{“id“:“custom_color“,“color“:“#ee9ae5“},“to“:{“id“:“custom_color“,“color“:“rgba(89,97,249,1)“}}” overlay_color=”{“solid“:{“id“:““,“color“:““}}”][vc_column el_design=”{“desktop“:{“padding-top“:“15“,“padding-right“:“15“,“padding-bottom“:“15“,“padding-left“:“15“}}” css_animation=””][vc_heading heading_text=”Modals” heading_wrapper=”h1″ heading_color=”{“solid“:{“id“:“custom_8548853511531338“,“color“:“#f3f4f5“}}” heading_typography=”{“variants“:“700“,“transform“:“uppercase“,“font_size“:“30px“}” responsiveness=”yes” tablet_portrait=”90″ mobile_landscape=”85″ mobile_portrait=”75″ css_animation=””][vc_empty_space height=”15px”][vc_text_element typography=”{“variants“:“300“,“font_size“:“20px“}” disable_margin=”yes” css_animation=”” color=”{“id“:“custom_3715609566673309“,“color“:“#ffffff“}”]Popup modals with any content.[/vc_text_element][/vc_column][/vc_row][vc_row row_width=”wtbx_stretch_row_content” nav_skin=”light” consent_include=”include”][vc_column el_design=”{“desktop“:{“padding-top“:“0“,“padding-right“:“0“,“padding-bottom“:“0“,“padding-left“:“0“}}” css_animation=””][vc_section_divider style=”layered-6″ height=”100″ responsiveness=”yes” tablet_landscape=”100″ tablet_portrait=”60″ mobile_landscape=”0″ mobile_portrait=”0″ color=”{“id“:“custom_1334459184315555“,“color“:“rgba(255,255,255,1)“}”][/vc_column][/vc_row][vc_row max_width=”800″ nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-top“:“120“,“padding-bottom“:“120“}}”][vc_column css_animation=””][vc_heading heading_text=”Display modals easily” heading_wrapper=”h1″ alignment=”align_center” style=”with_line_side” heading_color=”{“solid“:{“id“:“Dark color“,“color“:“#2d3543“}}” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“600“,“subsets“:“latin“,“transform“:“uppercase“,“font_size“:“16px“}” divider_length=”100″ divider_thickness=”1″ space=”15″ divider_rounded=”” css_animation=””][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]
You can add as many modal windows to your page as you want. Modals can be filled with any content: text, images, forms etc.
You can set them to be triggered by any link on your page, which allows to have triggers attached to any element supporting links, e.g. buttons, icons, images, content boxes, and many more including inline text links.
[/vc_text_element][/vc_column][/vc_row][vc_row nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-top“:“120“,“padding-bottom“:“120“}}” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_column css_animation=””][vc_heading heading_text=”Modal triggered with a button” heading_wrapper=”h1″ alignment=”align_center” style=”with_line_side” heading_color=”{“solid“:{“id“:“Dark color“,“color“:“#2d3543“}}” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“600“,“subsets“:“latin“,“transform“:“uppercase“,“font_size“:“16px“}” divider_length=”100″ divider_thickness=”1″ space=”15″ divider_rounded=”” css_animation=””][vc_empty_space][/vc_column][vc_column width=”1/3″ css_animation=””][vc_button_glowing title=”Modal style 1″ text_typography=”{“font_family“:“1588135352059941“,“variants“:“400“,“subsets“:“latin“,“transform“:“none“,“font_size“:“16px“,“letter_spacing“:“0px“}” size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”url:%23modal-one|||” border_radius=”{“top-left“:6,“top-right“:6,“bottom-right“:6,“bottom-left“:6,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(120,92,255,1)“}}” bg_color_h=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(99,96,255,1)“},“to“:{“id“:“custom_color“,“color“:“#934fff“}}” border_radius_h=”{“top-left“:16,“top-right“:16,“bottom-right“:16,“bottom-left“:16,“property“:“border“,“suffix“:“radius“}”][/vc_column][vc_column width=”1/3″ css_animation=””][vc_button_glowing title=”Modal style 2″ text_typography=”{“font_family“:“1588135352059941“,“variants“:“400“,“subsets“:“latin“,“transform“:“none“,“font_size“:“16px“,“letter_spacing“:“0px“}” size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”url:%23modal-two|||” border_radius=”{“top-left“:6,“top-right“:6,“bottom-right“:6,“bottom-left“:6,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(120,92,255,1)“}}” bg_color_h=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(99,96,255,1)“},“to“:{“id“:“custom_color“,“color“:“#934fff“}}” border_radius_h=”{“top-left“:16,“top-right“:16,“bottom-right“:16,“bottom-left“:16,“property“:“border“,“suffix“:“radius“}”][/vc_column][vc_column width=”1/3″ css_animation=””][vc_button_glowing title=”Modal style 3″ text_typography=”{“font_family“:“1588135352059941“,“variants“:“400“,“subsets“:“latin“,“transform“:“none“,“font_size“:“16px“,“letter_spacing“:“0px“}” size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”url:%23modal-three|||” border_radius=”{“top-left“:6,“top-right“:6,“bottom-right“:6,“bottom-left“:6,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(120,92,255,1)“}}” bg_color_h=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(99,96,255,1)“},“to“:{“id“:“custom_color“,“color“:“#934fff“}}” border_radius_h=”{“top-left“:16,“top-right“:16,“bottom-right“:16,“bottom-left“:16,“property“:“border“,“suffix“:“radius“}”][/vc_column][/vc_row][vc_row nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-top“:“120“,“padding-bottom“:“120“}}” custom_bg_color=”{“solid“:{“id“:“custom_3715609566673309“,“color“:“#ffffff“}}”][vc_column css_animation=””][vc_heading heading_text=”Modal triggered with an image box” heading_wrapper=”h1″ alignment=”align_center” style=”with_line_side” heading_color=”{“solid“:{“id“:“Dark color“,“color“:“#2d3543“}}” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“600“,“subsets“:“latin“,“transform“:“uppercase“,“font_size“:“16px“}” divider_length=”100″ divider_thickness=”1″ space=”15″ divider_rounded=”” css_animation=””][vc_empty_space][/vc_column][vc_column width=”1/3″ css_animation=””][vc_image_box image=”5916″ aspect_ratio=”16:10″ style=”style_1″ overlay_color=”{“solid“:{“id“:““,“color“:““}}” radius=”4″ title=”First Box” title_typography=”{“font_size“:“20px“}” img_link=”page_link” preloader=”” css_animation=”wtbx-anim-bottom-to-top-small” css_animation_easing=”wtbx_easing-natural” css_animation_duration=”wtbx-duration-1000″ css_animation_delay=”” link=”url:%23modal-one|||”]Distinctively facilitate an expanded array of markets after progressive results. Phosfluorescently expedite distinctive e-markets through magnetic manufactured.[/vc_image_box][/vc_column][vc_column width=”1/3″ css_animation=””][vc_image_box image=”5921″ aspect_ratio=”16:10″ style=”style_1″ overlay_color=”{“solid“:{“id“:““,“color“:““}}” radius=”4″ title=”Second Box” title_typography=”{“font_size“:“20px“}” img_link=”page_link” preloader=”” css_animation=”wtbx-anim-bottom-to-top-small” css_animation_easing=”wtbx_easing-natural” css_animation_duration=”wtbx-duration-1000″ css_animation_delay=”wtbx-delay-100″ link=”url:%23modal-two|||”]Distinctively facilitate an expanded array of markets after progressive results. Phosfluorescently expedite distinctive e-markets through magnetic manufactured.[/vc_image_box][/vc_column][vc_column width=”1/3″ css_animation=””][vc_image_box image=”5926″ aspect_ratio=”16:10″ style=”style_1″ overlay_color=”{“solid“:{“id“:““,“color“:““}}” radius=”4″ title=”Third Box” title_typography=”{“font_size“:“20px“}” img_link=”page_link” preloader=”” css_animation=”wtbx-anim-bottom-to-top-small” css_animation_easing=”wtbx_easing-natural” css_animation_duration=”wtbx-duration-1000″ css_animation_delay=”wtbx-delay-200″ link=”url:%23modal-three|||”]Distinctively facilitate an expanded array of markets after progressive results. Phosfluorescently expedite distinctive e-markets through magnetic manufactured.[/vc_image_box][/vc_column][/vc_row][vc_row max_width=”800″ nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-top“:“120“}}” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_column css_animation=””][vc_heading heading_text=”Modal triggered with a button” heading_wrapper=”h1″ alignment=”align_center” style=”with_line_side” heading_color=”{“solid“:{“id“:“Dark color“,“color“:“#2d3543“}}” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“600“,“subsets“:“latin“,“transform“:“uppercase“,“font_size“:“16px“}” divider_length=”100″ divider_thickness=”1″ space=”15″ divider_rounded=”” css_animation=””][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]
Modal windows can have different styles and different backdrop colors. Don’t forget that modals can be triggered by any link, even an inline link in text.
[/vc_text_element][/vc_column][/vc_row][vc_row max_width=”800″ nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-bottom“:“120“}}” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_column css_animation=””][vc_content_box style=”style_custom” shadow=”small_shadow” shadow_hover=”big_shadow” overflow=”” el_design=”{“desktop“:{“padding-top“:60,“padding-right“:60,“padding-bottom“:60,“padding-left“:60}}” border_hover=”default” equal_height=”” alignment=”” vertical_align=”” horizontal_align=”” css_animation=”” bg_color=”{“solid“:{“id“:“custom_3715609566673309“,“color“:“#ffffff“}}” bg_color_hover=”{“solid“:{“id“:““,“color“:““}}”][vc_text_element typography=”{“font_size“:“18px“}” css_animation=”” color=”{“id“:“Dark color“,“color“:“#2d3543“}”]
Modal windows can also have different show/hide animations. This one, for instance, scales up/down.
[/vc_text_element][/vc_content_box][/vc_column][/vc_row][vc_row nav_skin=”light” consent_include=”include”][vc_column css_animation=””][vc_modal id=”one” style=”style_1″ width=”600″ close_button_skin=”light” effect=”scale-up” el_design=”{“mobile_landscape“:{“padding-right“:30,“padding-left“:30},“desktop“:{“padding-top“:60,“padding-right“:60,“padding-bottom“:60,“padding-left“:60}}”][vc_icon style=”simple” simple_style=”circle” size=”40px” cont_size=”3em” align=”wtbx_align_center” css_animation=”” icon=”{“font“:“scape-basic“,“icon“:“scape-basic-Check-2“}” icon_color=”{“solid“:{“id“:“Light text color“,“color“:“#c0c9d6“}}” border_color=”{“solid“:{“id“:“Border color“,“color“:“#ecf0f3“}}” bg_color=”{“solid“:{“id“:““,“color“:““}}”][vc_empty_space][vc_heading heading_text=”Awesome!” heading_wrapper=”h6″ alignment=”align_center” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“500“,“subsets“:“latin“,“font_size“:“26px“}” css_animation=””][vc_empty_space height=”15px”][vc_text_element css_animation=””]
Credibly unleash cost effective synergy before functional content. Credibly envisioneer maintainable scenarios vis-a-vis parallel methodologies.
[/vc_text_element][vc_empty_space height=”15px”][vc_button_glowing title=”Start using Scape” text_typography=”{“variants“:“600“,“transform“:“none“,“font_size“:“16px“,“letter_spacing“:“0px“}” size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”|||” border_radius=”{“top-left“:50,“top-right“:50,“bottom-right“:50,“bottom-left“:50,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(65,199,140,1)“}}” bg_color_h=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(42,175,128,1)“},“to“:{“id“:“custom_color“,“color“:“rgba(99,226,147,1)“}}”][/vc_modal][vc_modal id=”two” style=”style_2″ overlay_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(255,255,255,0.85)“}}” close_button_skin=”light” effect=”scale-down” el_design=”{“desktop“:{“padding-top“:0,“padding-right“:0,“padding-bottom“:0,“padding-left“:0}}”][vc_row_inner content_placement=”middle” consent_include=”include” equal_height=”true”][vc_column_inner custom_bg_type=”image” custom_bg_cover=”cover” custom_bg_repeat=”no-repeat” custom_bg_position=”Center center” width=”1/2″ css_animation=”” custom_bg_image=”925″][vc_text_element typography=”{“font_family“:“1587868888295989“,“variants“:“900“,“subsets“:“latin“,“font_size“:“80px“}” css_animation=”” color=”{“id“:“custom_color“,“color“:“rgba(0,73,103,0.2)“}”]
-50%
[/vc_text_element][/vc_column_inner][vc_column_inner el_design=”{“mobile_landscape“:{“padding-top“:30,“padding-right“:30,“padding-bottom“:30,“padding-left“:30},“desktop“:{“padding-top“:45,“padding-right“:45,“padding-bottom“:45,“padding-left“:45}}” width=”1/2″ css_animation=””][vc_heading heading_text=”Purchase Scape with 50% discount.” heading_wrapper=”h6″ alignment=”align_left” heading_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(93,165,230,1)“}}” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“200“,“subsets“:“latin“,“font_size“:“30px“,“line_height“:“1.2em“}” css_animation=””][vc_empty_space][vc_text_element css_animation=””]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_text_element][vc_empty_space][vc_button_glowing title=”Purchase now” size=”5″ display=”display_block” css_animation=”” border_radius=”{“top-left“:8,“top-right“:8,“bottom-right“:8,“bottom-left“:8,“property“:“border“,“suffix“:“radius“}” bg_color=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(126,198,255,1)“},“to“:{“id“:“custom_color“,“color“:“rgba(106,231,232,1)“}}” bg_color_h=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(99,240,208,1)“},“to“:{“id“:“custom_color“,“color“:“rgba(118,141,255,1)“}}”][/vc_column_inner][/vc_row_inner][/vc_modal][vc_modal id=”three” style=”style_3″ overlay_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(23,26,31,0.7)“}}” close_button_skin=”dark” effect=”slide-up” el_design=”{“desktop“:{“padding-top“:“0“,“padding-right“:“0“,“padding-bottom“:“0“,“padding-left“:“0“}}”][vc_row_inner consent_include=”include” equal_height=”true”][vc_column_inner el_design=”{“desktop“:{“padding-top“:60,“padding-right“:60,“padding-bottom“:60,“padding-left“:60}}” width=”5/12″ css_animation=”” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_heading heading_text=”Your opinion is really important for us.” heading_wrapper=”h6″ alignment=”align_left” heading_color=”{“solid“:{“id“:““,“color“:““}}” heading_typography=”{“variants“:“600“,“font_size“:“16px“,“line_height“:“1.9em“}” css_animation=””][vc_empty_space][vc_text_element css_animation=””]
Objectively develop seamless interfaces before distributed methods of empowerment.
Dynamically seize empowered communities rather than mission-critical.
[/vc_text_element][vc_empty_space][vc_scape_social_icons style=”style_1″ size=”3″ color_type_default=”custom” color_default=”{“id“:“Light text color“,“color“:“#c0c9d6“}” color_type_hover=”branded” networks=”dribbble,facebook,github,instagram,linkedin” css_animation=””][/vc_column_inner][vc_column_inner el_design=”{“desktop“:{“padding-top“:60,“padding-right“:60,“padding-bottom“:60,“padding-left“:60}}” width=”7/12″ css_animation=””][vc_heading heading_text=”Send us a message” heading_wrapper=”h6″ alignment=”align_left” heading_typography=”{“font_size“:“20px“}” css_animation=””][vc_empty_space]