{"id":79,"date":"2020-04-21T15:04:45","date_gmt":"2020-04-21T19:04:45","guid":{"rendered":"https:\/\/wpdocs.bu.edu\/bu-blocks\/?page_id=79"},"modified":"2020-04-21T15:11:29","modified_gmt":"2020-04-21T19:11:29","slug":"modal-block","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/bu-blocks\/blocks\/modal-block\/","title":{"rendered":"Modal Block"},"content":{"rendered":"\n<p>A block with a callout for opening a modal with supplemental or complementary information.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/wpdocs.bu.edu\/bu-prepress\/files\/2020\/03\/Screen-Shot-2020-03-02-at-3.56.21-PM.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" width=\"1024\" height=\"515\" src=\"\/bu-blocks\/files\/2020\/04\/modal-example-closed-1024x515.png\" alt=\"\" class=\"wp-image-84\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-closed-1024x515.png 1024w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-closed-636x320.png 636w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-closed-768x386.png 768w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-closed.png 1628w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Modal block closed<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/wpdocs.bu.edu\/bu-prepress\/files\/2020\/03\/Screen-Shot-2020-03-02-at-3.56.34-PM.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" width=\"1024\" height=\"356\" src=\"\/bu-blocks\/files\/2020\/04\/modal-example-open-1024x356.png\" alt=\"Modal blocks open\" class=\"wp-image-85\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-open-1024x356.png 1024w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-open-636x221.png 636w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-open-768x267.png 768w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/modal-example-open.png 1946w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Modal blocks open<\/figcaption><\/figure>\n\n\n\n<h4>Why would I use this block?<\/h4>\n\n\n\n<p>Use this block in an article that includes a lengthy sidebar of information or multimedia content like a video.<\/p>\n\n\n\n<h4>Examples:<\/h4>\n\n\n\n<ul><li><a href=\"http:\/\/www.bu.edu\/articles\/2017\/avrum-spira-janssen-pharmaceutical-companies\/\">http:\/\/www.bu.edu\/articles\/2017\/avrum-spira-janssen-pharmaceutical-companies\/<\/a><\/li><li><a href=\"http:\/\/www.bu.edu\/articles\/2019\/making-primary-care-a-priority\/\">http:\/\/www.bu.edu\/articles\/2019\/making-primary-care-a-priority\/<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Using the Modal block<br><\/h2>\n\n\n\n<h4>Watch this quick video tutorial:<\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wpdocs.bu.edu\/bu-prepress\/files\/2020\/03\/modal.mov\"><\/video><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Or follow these instructions:<br><\/h4>\n\n\n\n<p>Add the Modal block to your article.<\/p>\n\n\n\n<p>Enter your content. The upper area is the callout, which will display before the Modal is open. It can include a background image, title, text and custom button text. The bottom area is the content, which will display after the Modal is open. It can include paragraphs, headings, images and video.<\/p>\n\n\n\n<p>Once you\u2019ve added your content, you can align the block to the right or left.<\/p>\n\n\n\n<p>You can also choose the give the expanded content area a Dark Background to help distinguish it from the article.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A block with a callout for opening a modal with supplemental or complementary information. Why would I use this block? Use this block in an article that includes a lengthy sidebar of information or multimedia content like a video. Examples: http:\/\/www.bu.edu\/articles\/2017\/avrum-spira-janssen-pharmaceutical-companies\/http:\/\/www.bu.edu\/articles\/2019\/making-primary-care-a-priority\/ Using the Modal block Watch this quick video tutorial: Or follow these instructions: Add [&hellip;]<\/p>\n","protected":false},"author":13922,"featured_media":0,"parent":26,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/79"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/users\/13922"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":5,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/79\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/79\/revisions\/86"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/26"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/media?parent=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}