Examples

Relatively loaded target

<a href="../../css/alerts/ #examples" data-modal-title="Relative Url">
    Launch relative overlay
</a>

External target with iframe header and footer

<a href="//www.imageprocessor.org" data-modal-title="ImageProcessor" 
   data-modal-description="
sample text or the footer.
" data-modal-iframe-scroll="false"<p>sample text or the footer.</p>">
    Launch external overlay
</a>

External target with iframe header and footer and scrollbars

<a href="//www.imageprocessor.org" data-modal-title="ImageProcessor" 
   data-modal-description="<p>sample text or the footer.</p>" >
    Launch external overlay
</a>

Youtube

<a href="//www.youtube.com/embed/eRW84aVCMWo" data-modal-title="Youtube">
Launch Youtube overlay
</a>

Vimeo

<a href="//player.vimeo.com/video/101980132" data-modal-title="Vimeo">
    Launch Vimeo overlay
</a>

Google Maps

<a href="//maps.google.co.uk/maps?safe=off&q=glasgow&ie=UTF8&hq=&hnear=Glasgow,+Glasgow+City,+United+Kingdom&gl=uk&t=h&z=11&ll=55.864237,-4.251806&output=embed" 
   data-modal-title="Google Maps">
    Launch Google Map overlay
</a>

Internal target

<a href="#" data-modal-target="#overlay1">Launch internal overlay</a>
<div id="overlay1" class="hidden">
    <p>
        Lorem ipsum dolor sit amet...
    </p>
</div>

Linked Internal Targets Showing Steps

<a href="#" data-modal-target="#overlay2">Launch internal overlay</a>
<div id="overlay2" class="hidden">
    <h2>Step One</h2>
    <p>
        Lorem ipsum dolor sit amet...
    </p>
<p><a href="#" data-modal-target="#overlay3">Go to Step Two</a></p>
</div>
    <div id="overlay3" class="hidden">
    <h2>Step Two</h2>
    <p>
        Lorem ipsum dolor sit amet...
    </p>
        <p><a href="#" data-modal-target="#overlay2">Back to Step One</a></p>
</div>

Internal Target with Modal behavior

<a href="#" class="modal" data-modal-target="#modal" data-modal-modal="button">Launch modal overlay</a>
<div id="modal" class="hidden">
    <p>
        Lorem ipsum dolor sit amet...
    </p>
    <p>
        <button role="button">Click to close.</button>
    </p>
</div>

Form

<a href="#" data-modal-target="#form-overlay" data-modal-fit-viewport="false">
    Launch internal overlay containing a form
</a>

Wrapped Image

<a href="../../assets/img/768x900.jpg" data-modal-title="Kittens!">
    <img src="../../assets/img/768x900_thumb.jpg" />
</a>

Mobile Redirect

Redirects on viewports of grid range s and below. (settable)

<a href="../../assets/img/768x900.jpg" 
   data-modal-mobile-target="../assets/img/768x900.jpg" 
   data-modal-mobile-viewport-width="s">
    <img src="../assets/img/768x900_thumb.jpg" />
</a>

Grouped

<a class="grouped" href="../../assets/img/hydrangeas.jpg" 
   data-modal-title="Hydrangeas with a long title appended" 
   data-modal-group=".grouped">
    Grouped Item 1
</a>

Markup

/* Add to your element. */
<a href="YOUR_TARGET" or data-modal-target="YOUR_TARGET" 
   data-modal-title="YOUR_TITLE">
modal trigger
</a>

Methods

The modal exposes the following method signatures.

.modal(options)

Initialises the plugin with an optional options object

Name	Type	Description	Default Value
target	string	A target to display in the modal. Either a relative or absolute url or a jQuery selector.	null
modal	string	A jQuery selector that assigns a trigger to replace all other close triggers.	false
external	boolean	Whether the target is on a different page. Used for forcing the modal to recognize external urls when automatic detection fails.	false
group	string	A jQuery selector containing a group identifier for creating galleries.	null
image	boolean	Whether the target is an image. Used for forcing image behaviour when automatic detection fails.	false
immediate	boolean	Whether to show the modal immediately.	false
iframe	boolean	Whether to use an iframe. Used for forcing iframe behaviour when automatic detection fails.	false
iframeScroll	boolean	Whether the iframe should have scrollbars.	true
fitViewport	boolean	Whether loaded content width should be forced to fit the viewport.	true
keyboard	boolean	Whether to enable keyboard control.	true
touch	boolean	Whether the lightbox responds to touch events	true
title	string	The html to insert as the title of the modal.	null
description	string	The html to insert as the description of the modal in the footer.	null
next	string	The html to insert into the next indicator.	>
nextHint	string	A hidden html value that is added to the next trigger for accessibility purposes. The default language direction indicator is reversed by setting the dir="rtl" attribute on the html element.	Next {Left|Right} Arrow
previous	string	The html to insert into the previous indicator.	<
previousHint	string	A hidden html value that is added to the previous trigger for accessibility purposes. The default language direction indicator is reversed by setting the dir="rtl" attribute on the html element.	Previous {Left|Right} Arrow
closeHint	string	A hidden html value that is added to the close trigger for accessibility purposes.	Close (Esc)
errorHint	string	The html containing a message that will be inserted into the modal when an ajax error occurs.	<p>An error has occured.</p>
mobileTarget	string	An alternative url for mobile views.	null
mobileViewportWidth	number	The maximum viewport width to present the alternative url for. This can either be given by passing either one of the grid ranges xxs, xs ,s,m, orl or by in a pixel value.	xs

.modal("show")

Show the modal.

.modal("hide")

Hide the modal.

.modal("prev")

Cycles the modal instance to the previous item in a group.

.modal("next")

Cycles the modal instance to the next item in a group.

Events

The modal exposes the following events allowing the developer to tap into its behaviour.

show.r.modal

This event is fired immediately when the plugins show instance method is invoked.

shown.r.modal

This event is fired when the plugins shown instance method is invoked once the target has completed the animation and is shown.

hide.r.modal

This event is fired immediately when the plugins hide instance method is invoked.

hidden.r.modal

This event is fired when the plugins hidden instance method is invoked once the target has completed the animation and is hidden.

error.r.modal

This event is fired when the plugin encounters an error when attempting to load ajax content.

Binding to these events is as follows:

// Bind to the show event.
$("YOUR_TRIGGER_SELECTOR").on("show.r.modal", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the shown event.
$("YOUR_TRIGGER_SELECTOR").on("shown.r.modal", function(event) {
    // Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_TRIGGER_SELECTOR").on("hide.r.modal", function(event) {
    // Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_TRIGGER_SELECTOR").on("hidden.r.modal", function(event) {
    // Your custom behaviour...
});
// Bind to the ajax error event.
$("YOUR_TRIGGER_SELECTOR").on("error.r.modal", function(event) {
    // Your custom behaviour...
});

Data API

The modal's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to disable this behaviour the following code will allow you to do so.

// Disable the default loading behaviour
$(document).off(".r.modal.data-api");