{"id":1839,"date":"2018-01-08T10:40:33","date_gmt":"2018-01-08T08:40:33","guid":{"rendered":"https:\/\/themes.whiteboxstud.io\/rendr\/?page_id=1839"},"modified":"2022-08-03T21:58:04","modified_gmt":"2022-08-03T19:58:04","slug":"modals","status":"publish","type":"page","link":"https:\/\/themes.whiteboxstud.io\/rendr\/modals\/","title":{"rendered":"Modals"},"content":{"rendered":"

[vc_row max_width=”600″ min_height=”500″ content_placement=”middle” bg_blur=”0″ 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=”{“solid“:{“id“:“Dark color“,“color“:“#1b192a“}}” overlay_color=”{“solid“:{“id“:““,“color“:““}}”][vc_column el_design=”{“desktop“:{“padding-top“:“15“,“padding-right“:“15“,“padding-bottom“:“15“,“padding-left“:“15“}}” bg_blur=”0″ css_animation=””][vc_heading heading_wrapper=”h1″ heading_color=”{“solid“:{“id“:“custom_8548853511531338“,“color“:“#f3f4f5“}}” responsiveness=”yes” tablet_landscape=”100″ tablet_portrait=”90″ mobile_landscape=”85″ mobile_portrait=”75″ css_animation=””]Modals[\/vc_heading][vc_empty_space height=”15px”][vc_text_element disable_margin=”yes” css_animation=”” color=”{“id“:“custom_3715609566673309“,“color“:“#ffffff“}”]Popup modals with any content.[\/vc_text_element][vc_empty_space][vc_button_arrow title=”Back to homepage” style=”round” display=”display_block” skin=”light” css_animation=”” accent_color=”{“id“:“Main accent color“,“color“:“#fb9272“}” link=”url:https%3A%2F%2Fthemes.whiteboxstud.io%2Frendr%2Flanding%2F|title:Landing”][\/vc_column][\/vc_row][vc_row row_width=”wtbx_stretch_row_content” bg_blur=”0″ nav_skin=”light” consent_include=”include”][vc_column el_design=”{“desktop“:{“padding-top“:“0“,“padding-right“:“0“,“padding-bottom“:“0“,“padding-left“:“0“}}” bg_blur=”0″ css_animation=””][vc_section_divider style=”curves-6″ position=”bottom” 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″ bg_blur=”0″ nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-top“:“120“,“padding-bottom“:“120“}}”][vc_column bg_blur=”0″ css_animation=””][vc_heading 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=””]Display modals easily[\/vc_heading][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]<\/p>\n

You can add as many modal windows to your page as you want. Modals can be filled with any content: text, images, forms etc.<\/p>\n

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.<\/p>\n

[\/vc_text_element][\/vc_column][\/vc_row][vc_row bg_blur=”0″ 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 bg_blur=”0″ css_animation=””][vc_heading 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=””]Modal triggered with a button[\/vc_heading][vc_empty_space][\/vc_column][vc_column bg_blur=”0″ width=”1\/3″ css_animation=””][vc_button_glowing title=”Modal style 1″ size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”url:%23modal-one|||” border_radius=”{“top-left“:20,“top-right“:20,“bottom-right“:20,“bottom-left“:20,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“Main accent color“,“color“:“#fb9272“}}” bg_color_h=”{“solid“:{“id“:“custom_5686343055316235“,“color“:“#6541b5“}}”][\/vc_column][vc_column bg_blur=”0″ width=”1\/3″ css_animation=””][vc_button_glowing title=”Modal style 2″ size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”url:%23modal-two|||” border_radius=”{“top-left“:20,“top-right“:20,“bottom-right“:20,“bottom-left“:20,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“Main accent color“,“color“:“#fb9272“}}” bg_color_h=”{“solid“:{“id“:“custom_5686343055316235“,“color“:“#6541b5“}}”][\/vc_column][vc_column bg_blur=”0″ width=”1\/3″ css_animation=””][vc_button_glowing title=”Modal style 3″ size=”5″ display=”display_block” button_align=”btn_align_center” css_animation=”” link=”url:%23modal-three|||” border_radius=”{“top-left“:20,“top-right“:20,“bottom-right“:20,“bottom-left“:20,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“Main accent color“,“color“:“#fb9272“}}” bg_color_h=”{“solid“:{“id“:“custom_5686343055316235“,“color“:“#6541b5“}}”][\/vc_column][\/vc_row][vc_row bg_blur=”0″ 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 bg_blur=”0″ css_animation=””][vc_heading 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=””]Modal triggered with an image box[\/vc_heading][vc_empty_space][\/vc_column][vc_column bg_blur=”0″ width=”1\/3″ css_animation=””][vc_image_box image=”10957″ aspect_ratio=”2:1″ style=”style_1″ radius=”30″ 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=”” overlay_color=”{“solid“:{“id“:““,“color“:““}}” link=”url:%23modal-one|||”]Distinctively facilitate an expanded array of markets after progressive results.[\/vc_image_box][\/vc_column][vc_column bg_blur=”0″ width=”1\/3″ css_animation=””][vc_image_box image=”10960″ aspect_ratio=”2:1″ style=”style_1″ radius=”30″ 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″ overlay_color=”{“solid“:{“id“:““,“color“:““}}” link=”url:%23modal-two|||”]Distinctively facilitate an expanded array of markets after progressive results.[\/vc_image_box][\/vc_column][vc_column bg_blur=”0″ width=”1\/3″ css_animation=””][vc_image_box image=”10959″ aspect_ratio=”2:1″ style=”style_1″ radius=”30″ 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″ overlay_color=”{“solid“:{“id“:““,“color“:““}}” link=”url:%23modal-three|||”]Distinctively facilitate an expanded array of markets after progressive results.[\/vc_image_box][\/vc_column][\/vc_row][vc_row max_width=”800″ bg_blur=”0″ nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-top“:“120“}}” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_column bg_blur=”0″ css_animation=””][vc_heading 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=””]Modal triggered with a button[\/vc_heading][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]<\/p>\n

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<\/a> in text.<\/p>\n

[\/vc_text_element][\/vc_column][\/vc_row][vc_row max_width=”800″ bg_blur=”0″ nav_skin=”light” consent_include=”include” el_design=”{“desktop“:{“padding-bottom“:“120“}}” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_column bg_blur=”0″ css_animation=””][vc_content_box style=”style_custom” shadow=”small_shadow” shadow_hover=”big_shadow” overflow=”” bg_blur=”0″ 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“}”]<\/p>\n

Modal windows can also have different show\/hide animations. This one<\/a>, for instance, scales up\/down.<\/p>\n

[\/vc_text_element][\/vc_content_box][\/vc_column][\/vc_row][vc_row bg_blur=”0″ nav_skin=”light” consent_include=”include”][vc_column bg_blur=”0″ 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“:“app-media-controls“,“icon“:“app-media-controls–controls81“}” icon_color=”{“solid“:{“id“:“Dark color“,“color“:“#1b192a“}}” border_color=”{“solid“:{“id“:““,“color“:““}}” bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9f6f4“}}”][vc_empty_space][vc_heading heading_wrapper=”h6″ alignment=”align_center” heading_typography=”{“font_family“:“1588135352059941“,“variants“:“500“,“subsets“:“latin“,“font_size“:“26px“}” css_animation=””]Awesome![\/vc_heading][vc_empty_space height=”15px”][vc_text_element css_animation=””]<\/p>\n

Credibly unleash cost effective synergy before functional content. Credibly envisioneer maintainable scenarios vis-a-vis parallel methodologies.<\/p>\n

[\/vc_text_element][vc_empty_space height=”15px”][vc_button_glowing title=”Start using Scape” text_typography=”{“variants“:“600“,“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“:“Dark color“,“color“:“#1b192a“}}” bg_color_h=”{“solid“:{“id“:“Main accent color“,“color“:“#fb9272“}}”][\/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” bg_blur=”0″ consent_include=”include” equal_height=”true”][vc_column_inner el_design=”{“desktop“:{“padding-top“:“15“,“padding-right“:“15“,“padding-bottom“:“15“,“padding-left“:“15“}}” bg_blur=”0″ 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=”10954″][vc_text_element typography=”{“variants“:“900“,“font_size“:“80px“}” css_animation=”” color=”{“id“:“custom_1334459184315555“,“color“:“rgba(255,255,255,1)“}”]<\/p>\n

-50%<\/p>\n

[\/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}}” bg_blur=”0″ width=”1\/2″ css_animation=””][vc_heading heading_wrapper=”h4″ css_animation=””]Purchase theme with limited time discount![\/vc_heading][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“:20,“top-right“:20,“bottom-right“:20,“bottom-left“:20,“property“:“border“,“suffix“:“radius“}” bg_color=”{“solid“:{“id“:“Dark color“,“color“:“#1b192a“}}” bg_color_h=”{“solid“:{“id“:“Main accent color“,“color“:“#fb9272“}}”][\/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 bg_blur=”0″ consent_include=”include” equal_height=”true”][vc_column_inner el_design=”{“desktop“:{“padding-top“:60,“padding-right“:60,“padding-bottom“:60,“padding-left“:60}}” bg_blur=”0″ width=”5\/12″ css_animation=”” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_heading heading_wrapper=”h6″ alignment=”align_left” heading_color=”{“solid“:{“id“:““,“color“:““}}” heading_typography=”{“variants“:“600“,“font_size“:“16px“,“line_height“:“1.9em“}” css_animation=””]Your opinion is really important for us.[\/vc_heading][vc_empty_space][vc_text_element css_animation=””]<\/p>\n

Objectively develop seamless interfaces before distributed methods of empowerment.<\/p>\n

Dynamically seize empowered communities rather than mission-critical.<\/p>\n

[\/vc_text_element][vc_empty_space][vc_rendr_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}}” bg_blur=”0″ width=”7\/12″ css_animation=””][vc_heading heading_wrapper=”h6″ alignment=”align_left” heading_typography=”{“font_size“:“20px“}” css_animation=””]Send us a message[\/vc_heading][vc_empty_space]\n

\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n