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

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

<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
<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">
    <figure class="inset-right" role="group">
      <img alt="Associate Professor Jane Academic" src="//placeimg.com/200/200/people" width="200" />
    </figure>
    <h1>
      Associate Professor Jane Academic
    </h1>
    <h2>
      Associate Professor & Reader
    </h2>
    <p>
      <br /><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>
  <p>
    <a class="button-small cta" href="http://www.unimelb.edu.au/" target="_blank" title="Academic Research Group">Research Group</a>
  </p>
  <p>
    <a class="button-small brand" href="http://www.findanexpert.unimelb.edu.au" target="_blank">Find An Expert</a>
  </p>
</div>