{"id":8298,"date":"2015-06-23T18:33:40","date_gmt":"2015-06-23T18:33:40","guid":{"rendered":"https:\/\/carpinteronaval.es\/en\/features\/modal-boxes\/"},"modified":"2015-06-23T18:33:40","modified_gmt":"2015-06-23T18:33:40","slug":"modal-boxes","status":"publish","type":"page","link":"https:\/\/carpinteronaval.es\/en\/features\/modal-boxes\/","title":{"rendered":"Modal Boxes"},"content":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1414485674632{margin-top: 70px !important;margin-bottom: 50px !important;}&#8221; type=&#8221;grid&#8221; parallax_speed=&#8221;0.3&#8243; mute=&#8221;muted&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_column_text]Create beautiful Popups within a few seconds with our custom VC Element. Modal Window Content is simply edited and can contain any HTML code or shortcodes. There are many\u00a0built in styles\u00a0for modal overlays to appear\u00a0and\u00a0showing them using CSS transitions and animations. Check examples bellow.[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1414483631487{margin-top: 50px !important;}&#8221; type=&#8221;grid&#8221; parallax_speed=&#8221;0.3&#8243; mute=&#8221;muted&#8221;][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-1 modhavetitle' id='modal-69f427dc0ec58' style='width:640px'><div class='dp-md-content' style='color:#555555; background-color:#f7f7f7'><h3 style='color:#ffffff; background-color:rgba(0,0,0,0.45)'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0ec58'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0ec58' data-id='69f427dc0ec58' style='background-color:rgba(0,0,0,0.7)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0ec58\"><a id=\"button-2033890738\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-2 modhavetitle' id='modal-69f427dc0ed3d' style='width:640px'><div class='dp-md-content' style='color:rgba(0,0,0,0.79); background-color:#d0dd2b'><h3 style='color:#ffffff; background-color:rgba(0,0,0,0.45)'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0ed3d'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0ed3d' data-id='69f427dc0ed3d' style='background-color:rgba(255,255,255,0.8)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0ed3d\"><a id=\"button-648727030\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-3 modhavetitle' id='modal-69f427dc0edc5' style='width:640px'><div class='dp-md-content' style='color:#555555; background-color:#f7f7f7'><h3 style='color:#ffffff; background-color:#ef1e1e'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0edc5'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0edc5' data-id='69f427dc0edc5' style='background-color:rgba(0,0,0,0.85)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0edc5\"><a id=\"button-1567287988\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-4' id='modal-69f427dc0ee46' style='width:640px'><div class='dp-md-content' style='color:#555555; background-color:#f7f7f7'><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0ee46'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0ee46' data-id='69f427dc0ee46' style='background-color:rgba(0,0,0,0.7)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0ee46\"><a id=\"button-35191363\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1414483631487{margin-top: 50px !important;}&#8221; type=&#8221;grid&#8221; parallax_speed=&#8221;0.3&#8243; mute=&#8221;muted&#8221;][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-5 modhavetitle' id='modal-69f427dc0eedd' style='width:640px'><div class='dp-md-content' style='color:#ffffff; background-color:#00a9e0'><h3 style='color:#ffffff; background-color:rgba(0,0,0,0.45)'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0eedd'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0eedd' data-id='69f427dc0eedd' style='background-color:rgba(255,255,255,0.86)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0eedd\"><a id=\"button-681470723\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-6 modhavetitle' id='modal-69f427dc0ef53' style='width:640px'><div class='dp-md-content' style='color:#ffffff; background-color:#67cddc'><h3 style='color:#ffffff; background-color:rgba(0,0,0,0.45)'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0ef53'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0ef53' data-id='69f427dc0ef53' style='background-color:rgba(255,255,255,0.85)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0ef53\"><a id=\"button-214376529\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-7' id='modal-69f427dc0efc6' style='width:500px'><div class='dp-md-content' style='color:#555555; background-color:#f7f7f7'><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0efc6'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0efc6' data-id='69f427dc0efc6' style='background-color:rgba(0,0,0,0.7)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0efc6\"><a id=\"button-1187702764\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-11 modhavetitle' id='modal-69f427dc0f037' style='width:640px'><div class='dp-md-content' style='color:#ffffff; background-color:#ef1e1e'><h3 style='color:#ffffff; background-color:#ef1e1e'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0f037'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0f037' data-id='69f427dc0f037' style='background-color:#ef1e1e'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0f037\"><a id=\"button-64186659\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1414512616748{margin-top: 50px !important;margin-bottom: 70px !important;}&#8221; type=&#8221;grid&#8221; parallax_speed=&#8221;0.3&#8243; mute=&#8221;muted&#8221;][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-8 modhavetitle' id='modal-69f427dc0f0b0' style='width:640px'><div class='dp-md-content' style='color:#ffffff; background-color:#00a9e0'><h3 style='color:#ffffff; background-color:rgba(0,0,0,0.45)'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0f0b0'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0f0b0' data-id='69f427dc0f0b0' style='background-color:rgba(255,255,255,0.86)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0f0b0\"><a id=\"button-1834745299\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-9 modhavetitle' id='modal-69f427dc0f11f' style='width:640px'><div class='dp-md-content' style='color:#ffffff; background-color:#67cddc'><h3 style='color:#ffffff; background-color:rgba(0,0,0,0.45)'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0f11f'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0f11f' data-id='69f427dc0f11f' style='background-color:rgba(255,255,255,0.85)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0f11f\"><a id=\"button-890246222\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][vc_column width=&#8221;1\/4&#8243;]<script type=\"text\/javascript\">jQuery(document).ready(function(){jQuery(\"<div class='dp-modal md-style-10 modhavetitle' id='modal-69f427dc0f1bc' style='width:640px'><div class='dp-md-content' style='color:#555555; background-color:#f7f7f7'><h3 style='color:#ffffff; background-color:#ef1e1e'>Modal Box Title<\/h3><div><p>This is a modal window. You can do the following things with it:<\/p><ul class='list-nostyle'><li><b>Read:<\/b> modal windows will probably tell you something important so don\u2019t forget to read what they say.<\/li><li><b>Look:<\/b> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.<\/li><li><b>Close:<\/b> click on the button above or on overlay to close the modal.<\/li><\/ul><\/div><\/div><div class='dp-modal-close' data-id='69f427dc0f1bc'><i class='icon-times'><\/i><\/div><\/div><div class='dp-md-overlay' id='overlay-69f427dc0f1bc' data-id='69f427dc0f1bc' style='background-color:rgba(0,0,0,0.7)'><\/div>\").prependTo(\"body\")})<\/script><div class=\"dp-md-trigger\" data-id=\"69f427dc0f1bc\"><a id=\"button-340300725\" href=\"#\" target=\"_self\" class=\"button_dp large color btnwithicon\" ><span><i class=\"Default-popup\"><\/i>  button<\/span><\/a><style scoped><\/style><\/div>[\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1414485674632{margin-top: 70px !important;margin-bottom: 50px !important;}&#8221; type=&#8221;grid&#8221; parallax_speed=&#8221;0.3&#8243; mute=&#8221;muted&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_column_text]Create beautiful Popups within a few seconds with our custom VC Element. Modal Window Content is <p><a class=\"readon\" href=\"https:\/\/carpinteronaval.es\/en\/features\/modal-boxes\/\"><span>read more<\/span><\/a><\/p><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8280,"menu_order":0,"comment_status":"open","ping_status":"open","template":"template.fullwidth.vc.php","meta":{"footnotes":""},"class_list":["post-8298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/pages\/8298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/comments?post=8298"}],"version-history":[{"count":0,"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/pages\/8298\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/pages\/8280"}],"wp:attachment":[{"href":"https:\/\/carpinteronaval.es\/en\/wp-json\/wp\/v2\/media?parent=8298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}