{"id":1389,"date":"2022-02-08T14:00:48","date_gmt":"2022-02-08T19:00:48","guid":{"rendered":"https:\/\/carleton.ca\/cms-help\/?page_id=1389"},"modified":"2022-03-03T09:16:24","modified_gmt":"2022-03-03T14:16:24","slug":"modal-links","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/","title":{"rendered":"Modal Links"},"content":{"rendered":"<p>Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an additional window that appears and requires the user to interact with it before they can return to the parent (original) window. They are also often referred to as \u2018dialogue boxes\u2019 or \u2018dialogue windows\u2019. Modal links are essentially a less intrusive version of pop up windows. With this comparison in mind, it is good to use modal links sparingly.<\/p>\n<p>Appropriate use cases for modal links include:<\/p>\n<ul>\n<li>Drawing attention to vital pieces of information<\/li>\n<li>Completing action items without exiting a window<\/li>\n<li>Reusing content across a site<\/li>\n<li>Accessing different content types such as watching videos and filling out forms<\/li>\n<\/ul>\n<p>Below are four sample modals, one for each type of modal.<\/p>\n<p><a href=\"https:\/\/carleton.ca\/cms-help\/?page_id=885&window=true\" class=\"ccms__fancybox\" data-type=\"iframe\" data-caption=\"Introduction to CMS Training\">Sample Carleton page modal: Introduction to CMS Training<\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=f9whA3pY5j0&#038;ab_channel=CarletonCMS\" class=\"ccms__fancybox\" data-caption=\"Galley Tutorial modal\">Sample video modal: Gallery Tutorial<\/a><\/p>\n<p><a href=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/cms-advanced-training-module-one-2.jpg\" class=\"ccms__fancybox\" data-caption=\"CMS Training logo modal\">Sample image modal: CMS Training Logo<\/a><\/p>\n<p><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\" class=\"ccms__fancybox\" data-type=\"iframe\" data-caption=\"WebAIM Alternative Text\">Sample external modal: WebAIM Alternative Text<\/a><p>\n<h2>Step-by-Step<\/h2>\n<h3>Create a modal link<img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1468 alignright\" src=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Modal-link-icon-26.png\" alt=\"\" width=\"159\" height=\"163\" srcset=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Modal-link-icon-26.png 226w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Modal-link-icon-26-160x164.png 160w\" sizes=\"(max-width: 159px) 100vw, 159px\" \/><\/h3>\n<ol>\n<li>Open the page or post to which you want to add the modal.<\/li>\n<li>Click <strong>Add Post Element<\/strong> located above the Content Editor.<\/li>\n<li>Click the <strong>Modal link<\/strong> icon<\/li>\n<li>Choose your modal type:\n<ol style=\"list-style-type: lower-alpha;\">\n<li><strong>External:<\/strong> these modals link to external web pages.<\/li>\n<li><strong>Carleton page:\u00a0<\/strong>these modals link to pages within your site.<\/li>\n<li><strong>Video: <\/strong>these modals link to YouTube or Vimeo videos<\/li>\n<li><strong>Image:\u00a0<\/strong>these modals link to images from your media library. You can also upload images to your media library while creating an image modal.<\/li>\n<\/ol>\n<\/li>\n<li>Link to your modal content:\n<ol style=\"list-style-type: lower-alpha;\">\n<li><strong>External:<\/strong> paste the URL of the page you wish to create a modal of in the <strong>External URL\u00a0<\/strong>field.<\/li>\n<li><strong>Carleton page:\u00a0<\/strong>find your page from the dropdown menu labeled\u00a0<strong>One of your pages<\/strong>.<\/li>\n<li><strong>Video:\u00a0<\/strong>paste the URL of your video in the\u00a0<strong>URL (Youtube or Vimeo)<\/strong> field.<\/li>\n<li><strong>Image:\u00a0<\/strong>click\u00a0<strong>Select Attachment<\/strong> and then either choose your image from the <strong>Media Library<\/strong> tab or upload it using the\u00a0<strong>Upload Files<\/strong> tab.<\/li>\n<\/ol>\n<\/li>\n<li>Fill in the\u00a0<strong>Text for the link<\/strong> field. This is what will appear on the page.<\/li>\n<li>Fill in the <strong>Title for the modal\u00a0<\/strong>field. This will not appear on the page.<\/li>\n<li>Click\u00a0<strong>Insert Element<\/strong>.<\/li>\n<\/ol>\n<h2>Video Tutorial<\/h2>\n<div class=\"content__video\"><iframe loading=\"lazy\" title=\"Module Three: Modal Links\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1G3_q3BCrFg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3>Transcript<\/h3>\n<div class=\"slideme\"><dl class=\"slideme__list\"><dt class=\"slideme__term\"><a href=\"#slideme-module-three-modal-links\" aria-expanded=\"false\" aria-controls=\"slideme-module-three-modal-links\" class=\"slideme__heading slideme__trigger\">Module Three: Modal Links<\/a><\/dt><dd class=\"slideme__description\" id=\"slideme-module-three-modal-links\" aria-hidden=\"true\"><p><\/p>\n<p><span style=\"font-weight: 400;\">Hello and welcome to Module 3 of our Advanced CMS Training. This video will discuss modal links. Modal links are links that open a new window within the page you are browsing. These can be used to display internal or external web pages, images, or videos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To add a modal link to your page or post, click <strong>Add Post Element<\/strong>. Then click <strong>Modal link<\/strong>.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, you\u2019ll need to select the type of modal link you want to create. We\u2019ll demonstrate inserting an image modal link, but each type is fairly similar. Fill out the field that appears with the content you want to insert as a modal link.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For the image modal, you can choose images either by uploading them from your device, or by selecting them from the Media Library. Click the image you would like to insert and then click <strong>Select<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, fill out the <strong>Text for the link<\/strong> and the <strong>Title for the modal<\/strong> fields.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then click <strong>Insert Element<\/strong>.<\/span><\/p>\n<p><\/p><\/dd><dl><\/div>\n<h2>Try It Out!<\/h2>\n<p>Here are a series of tasks to try out using modal links.<\/p>\n<ol>\n<li>Brainstorm situations where modal links might be appropriate to add to a page or post.<\/li>\n<li>Brainstorm situations where modal links might be intrusive or inconvenient to have on a page or post.<\/li>\n<li>Add a modal link of any type to your test page.<\/li>\n<\/ol>\n\n<div class=\"u-center-text\">\n\t<p>\n\t\t<a class=\"button__red button__red--solid\" href=\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/buttons\/\"  rel=\"noopener noreferrer\">Next: Buttons<\/a>\n\t<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an additional window that appears and requires the user to interact with it before they can return to the parent (original) window. They are also often referred to as \u2018dialogue boxes\u2019 [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"parent":864,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","_mi_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modal Links - Carleton CMS Help Centre<\/title>\n<meta name=\"description\" content=\"Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/\",\"url\":\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/\",\"name\":\"Modal Links - Carleton CMS Help Centre\",\"isPartOf\":{\"@id\":\"https:\/\/carleton.ca\/cms-help\/#website\"},\"datePublished\":\"2022-02-08T19:00:48+00:00\",\"dateModified\":\"2022-03-03T14:16:24+00:00\",\"description\":\"Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an\",\"breadcrumb\":{\"@id\":\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/carleton.ca\/cms-help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Training\",\"item\":\"https:\/\/carleton.ca\/cms-help\/advanced-training\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Module 3: Advanced Post Elements\",\"item\":\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Modal Links\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/carleton.ca\/cms-help\/#website\",\"url\":\"https:\/\/carleton.ca\/cms-help\/\",\"name\":\"Carleton CMS Help Centre\",\"description\":\"Web Services - Carleton university\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/carleton.ca\/cms-help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modal Links - Carleton CMS Help Centre","description":"Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/","url":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/","name":"Modal Links - Carleton CMS Help Centre","isPartOf":{"@id":"https:\/\/carleton.ca\/cms-help\/#website"},"datePublished":"2022-02-08T19:00:48+00:00","dateModified":"2022-03-03T14:16:24+00:00","description":"Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an","breadcrumb":{"@id":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/modal-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/carleton.ca\/cms-help\/"},{"@type":"ListItem","position":2,"name":"Advanced Training","item":"https:\/\/carleton.ca\/cms-help\/advanced-training\/"},{"@type":"ListItem","position":3,"name":"Module 3: Advanced Post Elements","item":"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-3-advanced-post-elements\/"},{"@type":"ListItem","position":4,"name":"Modal Links"}]},{"@type":"WebSite","@id":"https:\/\/carleton.ca\/cms-help\/#website","url":"https:\/\/carleton.ca\/cms-help\/","name":"Carleton CMS Help Centre","description":"Web Services - Carleton university","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carleton.ca\/cms-help\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"acf":{"banner_image_type":null,"banner_uploaded_image":null,"banner_hosted_image":null,"banner_opacity":null,"banner_button":null,"banner_buttons":null},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/1389"}],"collection":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/comments?post=1389"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/1389\/revisions"}],"predecessor-version":[{"id":1493,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/1389\/revisions\/1493"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/864"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/media?parent=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}