Components

Pop Up

The pop up component is used to display extra information to a website visitor. Visually it displays as linked text.

When a user clicks on a pop up link, a box with more information will pop up. This pop up can contain text content with links, bullet points and basic text formatting. Small inline images are also okay, but should be used sparingly. If the user wants to read more, and if there is more to read than displayed in the box, they can continue on to the glossary page for more information.

Content source options

There are two options (see below code demo) as to where you can source the pop up's content:

content (initially hidden content within the page's markup)
glossary (separate source which contains the pop up content)

Each of the above options gets specified on the pop up link as either a data-type of content or glossary. Each link also specifies a data-url for the pop up's content source.

For data-type="content" you'll need to specify a data-url with an anchor link that points to the relevant ID for its hidden content within the page.

For data-type="glossary" you'll need to specify a data-url that points to a JavaScript or JSON file which contains the content for the pop up.

JavaScript class: .js-reveal

JSON data doesn't exist

Content modal error

Content modal

Content modal doesn't exist

A small content

Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="glossary">JSON data Error</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="glossary" data-url="https://codepen.io/anon/pen/Njybyg.js">JS demo data 1</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="glossary" data-url="https://codepen.io/anon/pen/Njybyg.js">JS demo data 2</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="glossary" data-url="http://adelaide.stg.adelaide.edu.au/sprint-demo/api/glossary/dank">JSON PRD data</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="glossary" data-url="http://codepen.io/asmithdigital/pen/yolo.js">JSON data doesn't exist</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="content">Content modal error</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="content" data-url="#content-reveal">Content modal</a></p>

<p><a href="//adelaide.edu.au/glossary" class="js-reveal" data-type="content" data-url="#element-doesnt-exist-demo">Content modal doesn't exist</a></p>

<!-- Hidden content for modal -->
<!-- The ID for this element must be unique for each reveal instance -->
<div class="c-reveal" id="content-reveal">
  <h1>A small content</h1>
  <p>Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>