Modal

Overview

A simple two–part modal component, with a triggering link and a modal container. Features:

  • Will scroll and resize (mobile safe)
  • May contain any amount and type of content
  • Close button inserted automatically
  • Clicking on the blanket (overlay) closes the modal
  • Multiple modals allowed on the same page

Positioning

By default, the modal dialog is positioned at the center of the viewport. You may force the modal to appear 160px above the link by adding attribute data-modal-offset to the triggering link.

Options

  • data-modal-target – ID of modal to trigger required
  • data-modal-offset – Forces the modal dialog to appear 160px above the triggering link (no value needed) optional

Default modal

Test the modal

Here it is

The modal box, you can put whatever you want in it.

Or a normal text link 

<p>
  <a class="button" data-modal-target="test-modal" href="#">Test the modal</a>
</p>
<div class="modal__dialog" id="test-modal">
  <h1>
    Here it is
  </h1>
  <p>
    The modal box, you can put whatever you want in it.
  </p>
</div>
<p>
  Or a <a data-modal-target="test-modal" href="#">normal text link</a>
</p>

Offset positioning

Open a different modal

Here is another modal

You can also click outside the modal to close it 

<p>
  <a class="button" data-modal-offset="" data-modal-target="test-modal2" href="#">Open a different modal</a>
</p>
<div class="modal__dialog" id="test-modal2">
  <h1>
    Here is another modal
  </h1>
  <p>
    You can also click outside the modal to close it
  </p>
  <p>
    <img alt="" src="http://placeimg.com/400/300/arch" />
  </p>
</div>

Inset within modal

Academic Research Group
Associate Professor Jane Academic Rockets

Associate Professor Jane Academic

Associate Professor Jane Academic

Email
not-a-real-person@unimelb.edu.au
Location
Room 267, Chemistry Building, Parkville Campus
Address
School of Chemistry, The University of Melbourne, Victoria, 3010, Australia
Phone
+61 3 9999 0000 

<table class="zebra">
  <thead>
    <tr>
      <th width="40%">
        Academic
      </th>
      <th width="60%">
        Research Group
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a data-modal-target="floating-test-modal" href="#">Associate Professor Jane Academic</a>
      </td>
      <td>
        Rockets
      </td>
    </tr>
  </tbody>
</table>
<div class="modal__dialog" id="floating-test-modal">
  <section class="with-figure">
    <h1>
      Associate Professor Jane Academic
    </h1>
    <figure class="figure figure--right figure--min figure--confined">
      <img alt="Associate Professor Jane Academic" class="figure__contet" height="200" src="https://placeimg.com/200/200/people" width="200" />
    </figure>
    <p>
      <strong>Email</strong><br /><a href="mailto:null">not-a-real-person@unimelb.edu.au</a><br /><strong>Location</strong><br />Room 267, Chemistry Building, Parkville Campus<br /><strong>Address</strong><br />School of Chemistry, The University of Melbourne, Victoria, 3010, Australia<br /><strong>Phone</strong><br />+61 3 9999 0000
    </p>
  </section>
  <div>
    <a class="button-small cta" href="http://www.unimelb.edu.au/" target="_blank" title="Academic Research Group">Research Group</a> <a class="button-small brand" href="http://www.findanexpert.unimelb.edu.au" target="_blank">Find An Expert</a>
  </div>
</div>