How To: Modals

author: orionrush@gmail.com │ 30.07.1019

Overview

Modals in the ADRS application are driven by some basic styling, and the lightweight, accessible and responsive lightbox library lity. Full documentation for lity can be found on Github.

For a basic implementation please see the ADRS Style Guide #Modals.

NOTE: Natively, lity only works with <a href="" link elements. It requires the href attribute to either link to inline content with an element's id, or link to an external resource. To use a button element

modals1.png

  1. Remove inline onClick handelers to a links to popups
  2. Add lity data element data-lity to the a element
  3. Modal page html does not need the entire js and css package. So a limited subset of resources can be loaded.

Link to pop-up before:

		<a class="v1-a-icon icon-trending"
		href="/modals/time_series_popup.php?topic=poverty_inequality&user=20000&settings=..."
		id="popupmaxAge1"
		onclick="gksfun.TimeSeriesWindow( this.href ); return false;">
			<i class="v1-a-icon icon-trending"></i>
		</a>

Link to modal after:

		<a class="v1-a-icon icon-trending"
		href="/modals/time_series_popup.php?topic=poverty_inequality&user=20000&settings=..."
		id="popupmaxAge1"
		data-lity>
			<i class="v1-a-icon icon-trending"></i>
		</a>

Conversion steps for local content

modals1.png

These are relatively easy to set up, see the style guide for an indication on how to implement. See also the markup in Ben's input-examples as templates.