{"id":11179,"date":"2013-11-06T17:33:10","date_gmt":"2013-11-06T17:33:10","guid":{"rendered":"http:\/\/dante.swiftideas.net\/?page_id=11179"},"modified":"2013-11-06T17:33:10","modified_gmt":"2013-11-06T17:33:10","slug":"modals","status":"publish","type":"page","link":"https:\/\/vertigostudios.co.uk\/shortcodes\/modals\/","title":{"rendered":"Modals"},"content":{"rendered":"[spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;]\n<h3>They may not be the most exciting shortcode we have to offer, but they can be very useful. Below are a few examples of what you can do with them.<\/h3>\n[\/spb_text_block] [divider type=&#8221;thin&#8221; text=&#8221;Go to top&#8221; full_width=&#8221;no&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;] [blank_spacer height=&#8221;30px&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;] [spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; width=&#8221;1\/3&#8243; el_position=&#8221;first&#8221;]\n<p style=\"text-align: center;\"><a class=\"sf-button standard accent standard\" href=\"#modal-1\" role=\"button\" data-toggle=\"modal\"><span class=\"text\">SHOW ME THE MODAL!<\/span><\/a><div id=\"modal-1\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"OK, here's your modal.\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"><i class=\"ss-delete\"><\/i><\/button><h3 id=\"modal-label\">OK, here's your modal.<\/h3><\/div><div class=\"modal-body\"><\/p>\n<h1 style=\"text-align: center;\">Put anything you want in these bad boys.<\/h1>\n<div class=\"one_third\">\n<div class=\"chart-shortcode chart-170 chart-center\" data-linewidth=\"5\" data-percent=\"0\" data-animatepercent=\"30\" data-size=\"170\" data-barcolor=\"#00a0f3\" data-trackcolor=\"#e4e4e4\"><span>95,000<\/span><\/div>\n<h3 style=\"text-align: center;\">Click throughs.<\/h3>\n<\/div>\n<div class=\"one_third\">\n<div class=\"chart-shortcode chart-170 chart-center\" data-linewidth=\"5\" data-percent=\"0\" data-animatepercent=\"75\" data-size=\"170\" data-barcolor=\"#1dc6df\" data-trackcolor=\"#e4e4e4\"><span><i class=\"ss-view\"><\/i><\/span><\/div>\n<h3 style=\"text-align: center;\">95k Page Views<\/h3>\n<\/div>\n<div class=\"one_third last\">\n<div class=\"chart-shortcode chart-170 chart-center\" data-linewidth=\"5\" data-percent=\"0\" data-animatepercent=\"50%\" data-size=\"170\" data-barcolor=\"#00d1c5\" data-trackcolor=\"#e4e4e4\"><span><i class=\"ss-like\"><\/i><\/span><\/div>\n<h3 style=\"text-align: center;\">Projects complete.<\/h3>\n<\/div><div class=\"clearboth\"><\/div>\n<div class=\"horizontal-break\"> <\/div>\n<div class=\"progress-bar-wrap progress-standard\">\n<div class=\"bar-text\"><span class=\"bar-name\">Illustration:<\/span> <span class=\"progress-value\" style=\"color:#007ef3!important;\">100%<\/span><\/div>\n<div class=\"progress standard\">\n<div class=\"bar\" data-value=\"100\" style=\"background-color:#007ef3!important;\">\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"progress-bar-wrap progress-standard\">\n<div class=\"bar-text\"><span class=\"bar-name\">Photoshop:<\/span> <span class=\"progress-value\" style=\"color:#00a0f3!important;\">80%<\/span><\/div>\n<div class=\"progress standard\">\n<div class=\"bar\" data-value=\"80\" style=\"background-color:#00a0f3!important;\">\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"progress-bar-wrap progress-standard\">\n<div class=\"bar-text\"><span class=\"bar-name\">After Effects:<\/span> <span class=\"progress-value\" style=\"color:#1dc6df!important;\">70%<\/span><\/div>\n<div class=\"progress standard\">\n<div class=\"bar\" data-value=\"70\" style=\"background-color:#1dc6df!important;\">\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"progress-bar-wrap progress-standard\">\n<div class=\"bar-text\"><span class=\"bar-name\">Branding:<\/span> <span class=\"progress-value\" style=\"color:#00d1c5!important;\">100%<\/span><\/div>\n<div class=\"progress standard\">\n<div class=\"bar\" data-value=\"100\" style=\"background-color:#00d1c5!important;\">\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"progress-bar-wrap progress-standard\">\n<div class=\"bar-text\"><span class=\"bar-name\">Marketing:<\/span> <span class=\"progress-value\" style=\"color:#37ba85!important;\">100%<\/span><\/div>\n<div class=\"progress standard\">\n<div class=\"bar\" data-value=\"100\" style=\"background-color:#37ba85!important;\">\n<\/div>\n<\/div>\n<\/div>\n\n<p><\/div><\/div><\/div><\/div>\n[\/spb_text_block] [spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; width=&#8221;1\/3&#8243;]\n<p style=\"text-align: center;\"><a class=\"sf-button standard accent standard\" href=\"#modal-2\" role=\"button\" data-toggle=\"modal\"><span class=\"text\">MODAL EXAMPLE 2<\/span><\/a><div id=\"modal-2\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"Modal Example 2.\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"><i class=\"ss-delete\"><\/i><\/button><h3 id=\"modal-label\">Modal Example 2.<\/h3><\/div><div class=\"modal-body\"><\/p>\n[spb_video title=&#8221;Watch this video&#8221; link=&#8221;http:\/\/vimeo.com\/36176127&#8243; size=&#8221;630 x 347&#8243; full_width=&#8221;no&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;]\n<p>&nbsp;<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio.\u00a0Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio.<\/p>\n<p>Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie\u00a0hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio.\u00a0Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio.<\/p>\n<a class=\"sf-button standard green sf-icon-reveal ml0\" href=\"http:\/\/\" target=\"_self\"><i class=\"ss-view\"><\/i><span class=\"text\">WATCH ANOTHER VIDEO<\/span><\/a>\n<p><\/div><\/div><\/div><\/div>\n[\/spb_text_block] [spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; width=&#8221;1\/3&#8243; el_position=&#8221;last&#8221;]\n<p style=\"text-align: center;\"><a class=\"sf-button standard accent standard\" href=\"#modal-3\" role=\"button\" data-toggle=\"modal\"><span class=\"text\">MODAL EXAMPLE 3<\/span><\/a><div id=\"modal-3\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"Modal Example 3\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"><i class=\"ss-delete\"><\/i><\/button><h3 id=\"modal-label\">Modal Example 3<\/h3><\/div><div class=\"modal-body\"><\/p>\n<h1 style=\"text-align: center;\">Follow these instructions<\/h1>\n<div class=\"horizontal-break\"> <\/div>\n<div class=\"sf-icon-box sf-icon-box-left-icon sf-animation sf-icon-\" data-animation=\"fade-in\" data-delay=\"200\"><div class=\"sf-icon-cont cont-small sf-icon-float-none sf-icon-\"><span class=\"sf-icon-character sf-icon sf-icon-small\">1<\/span><\/div><div class=\"sf-icon-box-content-wrap clearfix\"><h3>Step One - Do this.<\/h3><div class=\"sf-icon-box-content\"><br \/>\nVestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet.<br \/>\n<\/div><\/div><\/div>\n<p>&nbsp;<\/p>\n<div class=\"sf-icon-box sf-icon-box-left-icon sf-animation sf-icon-\" data-animation=\"fade-in\" data-delay=\"600\"><div class=\"sf-icon-cont cont-small sf-icon-float-none sf-icon-\"><span class=\"sf-icon-character sf-icon sf-icon-small\">2<\/span><\/div><div class=\"sf-icon-box-content-wrap clearfix\"><h3>Step Two - Now do this.<\/h3><div class=\"sf-icon-box-content\"><br \/>\nVestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet.<br \/>\n<\/div><\/div><\/div>\n<p>&nbsp;<\/p>\n<div class=\"sf-icon-box sf-icon-box-left-icon sf-animation sf-icon-\" data-animation=\"fade-in\" data-delay=\"1000\"><div class=\"sf-icon-cont cont-small sf-icon-float-none sf-icon-\"><span class=\"sf-icon-character sf-icon sf-icon-small\">3<\/span><\/div><div class=\"sf-icon-box-content-wrap clearfix\"><h3>Step Three - You're done!<\/h3><div class=\"sf-icon-box-content\"><br \/>\nVestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet.<br \/>\n<\/div><\/div><\/div>\n<p>&nbsp;<\/p>\n<p><\/div><\/div><\/div><\/div>\n[\/spb_text_block]\n","protected":false},"excerpt":{"rendered":"<p>[spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;] They may not be the most exciting shortcode we have to offer, but they can be very useful. Below are a few examples of what you can do with them. [\/spb_text_block] [divider type=&#8221;thin&#8221; text=&#8221;Go to top&#8221; full_width=&#8221;no&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;] [blank_spacer height=&#8221;30px&#8221; width=&#8221;1\/1&#8243; el_position=&#8221;first last&#8221;] [spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; width=&#8221;1\/3&#8243; el_position=&#8221;first&#8221;] [\/spb_text_block] [spb_text_block pb_margin_bottom=&#8221;no&#8221; pb_border_bottom=&#8221;no&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8303,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/pages\/11179"}],"collection":[{"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/comments?post=11179"}],"version-history":[{"count":0,"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/pages\/11179\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/pages\/8303"}],"wp:attachment":[{"href":"https:\/\/vertigostudios.co.uk\/wp-json\/wp\/v2\/media?parent=11179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}