{"id":11976,"date":"2017-01-06T09:28:29","date_gmt":"2017-01-06T09:28:29","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11976"},"modified":"2018-03-27T09:32:21","modified_gmt":"2018-03-27T09:32:21","slug":"modal-box","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/modal-box","title":{"rendered":"Modal Box"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]Modal box allows you to add the content into a multipurpose and ultra stylish\u00a0shortcode and create popup element on the page.<\/p>\n<p>Your customers will definitely notice it.<\/p>\n<p>This is a nested shortcode \u2013 module that includes other modules. You may style the container and then fill it in with elements.<\/p>\n<p><strong>It is important to know, that in order to check the Modal Box popup window for the second time on the page, you need to clear all browser cache and cookies for the page in your browser!<\/strong><\/p>\n<p><strong>Also, only one Modal Box element is supposed to be added per page!<\/strong><\/p>\n<h5><\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<p><strong><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-12389\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/general-new-2.jpg\" alt=\"\" width=\"978\" height=\"396\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/general-new-2.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/general-new-2-300x121.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/general-new-2-768x311.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/strong><\/p>\n<ul>\n<li><strong>Display options<\/strong> &#8211; select the style of the displaying of the modal box element on the page.\n<ul>\n<li><strong>Delay<\/strong> &#8211; select this style to set the delay for the modal box displaying.<\/li>\n<li><strong>On scroll<\/strong> &#8211; select this style to show the modal box on scroll.<\/li>\n<li><strong>On click<\/strong> &#8211; select this style to show the modal box on click on button.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Timeout<\/strong> &#8211; set the delay timeout for the modal box in milliseconds. For <strong>Delay<\/strong> <strong>style<\/strong> only.<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Style settings&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Style settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11742\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/style-NEW-1.jpg\" alt=\"\" width=\"978\" height=\"609\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/style-NEW-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/style-NEW-1-300x187.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/style-NEW-1-768x478.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Modal box size<\/strong> &#8211; specify the width of the modal box according to the width of the container.<\/li>\n<li><strong>Overlay background<\/strong> &#8211; select the background color for the content around the popup element. The default color is #000.<\/li>\n<li><strong>Overlay opacity<\/strong> &#8211;\u00a0allows you to set the overlay&#8217;s opacity. The default opacity is 70%.<\/li>\n<li><strong>Background<\/strong> &#8211; select the background style for the modal box element.\n<ul>\n<li><strong>Color<\/strong> &#8211; set the background color for the popup content.\u00a0The default color is #fff.<\/li>\n<li><strong>Image<\/strong> &#8211; select this style to show the image as a background for the modal box.\n<ul>\n<li><strong>Image background<\/strong> &#8211; select the image from the media library for the modal box background.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Modal box border settings<\/h5>\n<ul>\n<li><strong>Border<\/strong> &#8211; select the border for the modal box. You may select <strong>solid<\/strong>, <strong>dashed<\/strong>, <strong>dotted<\/strong>, <strong>inset<\/strong> and <strong>outset<\/strong> variants.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Button Settings&#8221; tab_id=&#8221;1490022427019-6abfdde2-ea2c&#8221;][vc_column_text 0=&#8221;&#8221;]<\/p>\n<h3>Button Settings\u00a0\u00a0(For On Click Style Only)<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12394\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-1.jpg\" alt=\"\" width=\"978\" height=\"660\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-1-300x202.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-1-768x518.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Button text<\/strong> &#8211; enter the title for the button.<\/li>\n<li><strong>Button\u00a0alignment<\/strong> \u2013 select the horizontal alignment of the button. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<\/ul>\n<h4 class=\"wpb_vc_param_value \">Button paddings<\/h4>\n<ul>\n<li><strong>Left padding<\/strong> \u2013 set the left padding for the button in px. Default left padding is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del><del>Default button left padding<\/del>.<\/li>\n<li><strong>Right padding<\/strong> \u2013 set the left padding for the button in px. Default right padding is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del><del>Default button right padding<\/del>.<\/li>\n<\/ul>\n<h5>Color settings<\/h5>\n<ul>\n<li><strong>Text color<\/strong> \u2013 set the text color for the button. It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default Button Typography<\/del>section.<\/li>\n<li><strong>Hover text color<\/strong> \u2013 set the text color on hover for the button.\u00a0It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del><del class=\"support-arrow-right\">Default button options<\/del><del>Default button hover text color<\/del>.<\/li>\n<\/ul>\n<h5>Background settings<\/h5>\n<ul>\n<li><strong>Background color<\/strong> \u2013 set the background color for the button.It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del><del class=\"support-arrow-right\">Default button options<\/del><del>Default button background color<\/del>.<\/li>\n<li><strong>Hover background color<\/strong> \u2013\u00a0set the hover background color for the button.It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del><del class=\"support-arrow-right\">Default button options<\/del><del>Default button hover background color<\/del>.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-12395\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-2.jpg\" alt=\"\" width=\"978\" height=\"800\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-2.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-2-300x245.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/button-settins-2-768x628.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Idle Border<\/h5>\n<ul>\n<li><strong>Border style<\/strong> \u2013 select one of the available border styles for the button.\u00a0<strong>Dotted<\/strong>, <strong>dashed<\/strong> and <strong>solid<\/strong> variants are available.<strong>Theme default<\/strong> style will be inherited directly from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options\u00a0<\/del><del>Default button border style<\/del>.<\/li>\n<li><strong>Color<\/strong> \u2013 specify the color of the border.<\/li>\n<li><strong>Border radius<\/strong> \u2013 select the border radius for button module to have rounded corners.<\/li>\n<li><strong>Border width<\/strong> \u2013 set the width of the border. You may set the desired width each border: <strong>top, right, left<\/strong> and <strong>bottom<\/strong>.<\/li>\n<\/ul>\n<h5>Border on hover<\/h5>\n<ul>\n<li><strong>Border style<\/strong> \u2013 select one of the available border styles on hover for the button.\u00a0<strong>Dotted<\/strong>, <strong>dashed<\/strong> and <strong>solid<\/strong> variants are available.<strong>Theme default<\/strong> style will be inherited directly from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options\u00a0<\/del><del>Default button border style<\/del>.<\/li>\n<li><strong>Color<\/strong> \u2013 specify the color of the border on hover.<\/li>\n<li><strong>Border radius<\/strong> \u2013 select the border radius for button module to have rounded corners on hover.<\/li>\n<li><strong>Border width<\/strong> \u2013 set the width of the border on hover. You may set the desired width each border: <strong>top, right, left<\/strong> and <strong>bottom<\/strong>.<\/li>\n<\/ul>\n<h5>Box shadow settings<\/h5>\n<ul>\n<li><strong>Box shadow<\/strong> \u2013 set it to <strong>Enable<\/strong> to activate shadow for the button.\n<ul>\n<li><strong>Shadow parameters<\/strong> \u2013\u00a0choose shadow parameter and set the color, in accordance with the following structure: <strong>horizontal shadow<\/strong>, <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> \u2013 set the color for the button shadow.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box shadow on hover<\/strong> \u2013 set it to <strong>Enable<\/strong> to activate shadow for the button on hover.\n<ul>\n<li><strong>Shadow parameters<\/strong> \u2013\u00a0choose shadow parameter on hover and set the color, in accordance with the following structure: <strong>horizontal shadow,<\/strong> <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> \u2013 set the color for the button shadow on hover.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Button animation<\/strong> &#8211;\u00a0choose between 14 preset animation effects and select one for the appears effect.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1490023085501-7f91d2cd-6a21&#8243;][vc_column_text 0=&#8221;&#8221;]<\/p>\n<h3 class=\"dfd-title \">Typography settings (For On Click Style Only)<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1405 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1-300x192.jpg 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1-768x491.jpg 768w\" width=\"978\" height=\"625\" \/><\/p>\n<p>The settings are inherited from\u00a0inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del> <del>Default button typography<\/del> section.<\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use for the text in the button.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the button text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font of the button text.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the button text.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Modal box allows you to add the content into a multipurpose and ultra stylish shortcode and create popup element on the page.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[29,24,23,22,16,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11976"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=11976"}],"version-history":[{"count":17,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11976\/revisions"}],"predecessor-version":[{"id":14566,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11976\/revisions\/14566"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}