{"id":1501,"date":"2021-01-15T19:18:46","date_gmt":"2021-01-15T19:18:46","guid":{"rendered":"https:\/\/organicthemes.com\/demo\/origin\/?page_id=1501"},"modified":"2021-02-25T15:30:35","modified_gmt":"2021-02-25T15:30:35","slug":"modal-block","status":"publish","type":"page","link":"https:\/\/organicthemes.com\/demo\/origin\/blocks\/modal-block\/","title":{"rendered":"Modal Block"},"content":{"rendered":"\n<h2 class=\"has-text-align-center wp-block-heading\">Modal Block<\/h2>\n\n\n\n<p class=\"has-text-align-center\">The <a href=\"https:\/\/organicthemes.com\/blocks\"><strong>Modal Block<\/strong><\/a> is designed to display nested blocks and information within a popup modal box. This page provides a few examples of the Modal Block.<\/p>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block\"><div id=\"obb-modal-box-0\" class=\"modal obb-modal-box obb-style-modern obb-align-center\"><div class=\"obb-modal-content\" style=\"background-color:#fff;box-shadow:0 0 12px rgba(0,0,0,0.12)\">\n<div class=\"wp-block-cover alignfull has-background-dim\" style=\"background-image:url(https:\/\/organicthemes.com\/demo\/origin\/wp-content\/plugins\/organic-blocks-bundle\/images\/default-img.jpg)\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"has-text-align-center wp-block-heading\">My Modal<\/h2>\n\n\n\n<p class=\"has-text-align-center\">The <strong>Modal Block<\/strong> allows for the addition of multiple content types within the popup. By default, the modal displays a Cover Block and Paragraph Block.<\/p>\n<\/div><\/div>\n\n\n\n<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/organicthemes.com\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Get The Modal Block<\/strong><\/a><\/div>\n<\/div><\/div><div class=\"obb-button obb-modal-button\" style=\"text-align:center\"><a class=\"button obb-modal-open\" href=\"#obb-modal-box-0\" rel=\"modal:open\" onmouseout=\"this.style.background=&quot;#660099&quot;\" onmouseover=\"this.style.background=&quot;#ff33cc&quot;\" style=\"background:#660099;border-radius:3px;border-width:1px;border-style:solid;border-color:#ccc;box-shadow:0 0 12px rgba(0,0,0,0.12)\"><span class=\"obb-modal-button-text\" style=\"color:#fff\">My Example Modal Button<\/span><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block\"><div id=\"obb-modal-box-1\" class=\"modal obb-modal-box obb-style-minimal obb-align-center\"><div class=\"obb-modal-content\" style=\"background-color:#fff;box-shadow:0 0 12px rgba(0,0,0,0.12)\">\n<p class=\"has-text-align-center\">I&#8217;m just a simple modal box featuring sample content. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div><\/div><div class=\"obb-button obb-modal-button\" style=\"text-align:center\"><a class=\"button obb-modal-open\" href=\"#obb-modal-box-1\" rel=\"modal:open\" onmouseout=\"this.style.background=&quot;#3399cc&quot;\" onmouseover=\"this.style.background=&quot;#006699&quot;\" style=\"background:#3399cc;border-radius:3px;border-width:1px;border-style:solid;border-color:#ccc;box-shadow:0 0 12px rgba(0,0,0,0.12)\"><span class=\"obb-modal-button-text\" style=\"color:#fff\">Click The Modal Button<\/span><\/a><\/div><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block\"><div id=\"obb-modal-box-2\" class=\"modal obb-modal-box obb-style-rounded obb-align-center\"><div class=\"obb-modal-content\" style=\"background-color:#fff;box-shadow:0 0 12px rgba(0,0,0,0.12)\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8220;This is an example <strong><em>Modal Block<\/em><\/strong> using a text link instead of a button. Multiple block types have been added within this modal.&#8221;<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"317\" data-attachment-id=\"1036\" data-permalink=\"https:\/\/organicthemes.com\/demo\/origin\/header-03\/\" data-orig-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?fit=2400%2C1000&amp;ssl=1\" data-orig-size=\"2400,1000\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"header-03\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?fit=300%2C125&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?fit=760%2C317&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?resize=760%2C317&#038;ssl=1\" alt=\"\" class=\"wp-image-1036\" srcset=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?resize=1024%2C427&amp;ssl=1 1024w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?resize=300%2C125&amp;ssl=1 300w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?w=1520&amp;ssl=1 1520w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg?w=2280&amp;ssl=1 2280w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-left\">Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-left\">Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/organicthemes.com\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Example Button<\/strong><\/a><\/div>\n<\/div><\/div><div class=\"obb-button obb-modal-button\" style=\"text-align:center\"><a class=\"obb-modal-open\" href=\"#obb-modal-box-2\" rel=\"modal:open\"><span class=\"obb-modal-button-text\">Example Modal Text Link<\/span><\/a><\/div><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block\"><div id=\"obb-modal-box-3\" class=\"modal obb-modal-box obb-style-bordered obb-align-center\"><div class=\"obb-modal-content\" style=\"background-color:#193f52;border-radius:12px;border-width:4px;border-style:solid;border-color:#259995;box-shadow:0 0 24px rgba(60,192,236,0.75)\">\n<h4 class=\"wp-block-heading\"><span class=\"has-inline-color has-white-color\">A HIGHLY CUSTOMIZED EXAMPLE<\/span><\/h4>\n\n\n\n<p class=\"has-text-align-left\"><span class=\"has-inline-color has-white-color\">Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.<\/span><\/p>\n\n\n\n<p class=\"has-text-align-left\"><span class=\"has-inline-color has-white-color\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.<\/span><\/p>\n<\/div><\/div><div class=\"obb-button obb-modal-button\" style=\"text-align:center\"><a class=\"button obb-modal-open\" href=\"#obb-modal-box-3\" rel=\"modal:open\" onmouseout=\"this.style.background=&quot;#996633&quot;\" onmouseover=\"this.style.background=&quot;#cc9900&quot;\" style=\"background:#996633;border-radius:24px;border-width:5px;border-style:solid;border-color:#dadd34;box-shadow:0 0 12px rgba(0,0,0,0.12)\"><span class=\"obb-modal-button-text\" style=\"color:#fff\">Customized Modal<\/span><\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Modal Block The Modal Block is designed to display nested blocks and information within a popup modal box. This page provides a few examples of the Modal Block.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1339,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-no-sidebar.php","meta":{"footnotes":""},"class_list":["post-1501","page","type-page","status-publish"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/comments?post=1501"}],"version-history":[{"count":16,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1501\/revisions"}],"predecessor-version":[{"id":1542,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1501\/revisions\/1542"}],"up":[{"embeddable":true,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1339"}],"wp:attachment":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/media?parent=1501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}