node package manager


Accessible Over lays that don't suck!

Demo | Tests

Olay's one dependency is jQuery, so include that before Olay.

<link rel='stylesheet' href=''>
<script src=''></script>

...or use bower...

bower install olay

...and get the JavaScript and CSS files from components/olay/olay.js and components/olay/olay.css respectively.

Try running this code on the demo page.

// Show "¡Olé!" for one second and then hide, alerting "Farewell, mí amigo.". 
var olay = new Olay('<h1>¡Olé!</h1>', {duration: 1000});
olay.$el.on('olay:hide', function () { alert('Farewell, mí amigo.'); });;
  • el - a jQuery object, DOM node, jQuery selector or raw HTML.
  • options - An optional object with any or all of the following...
    • duration 0 - The number of milliseconds to display the olay before automatically invoking hide. A 0 duration means the olay will be displayed indefinitely.
    • transition 'js-olay-scale-up' - The transition to use. Since this property simply refers to the class that will be added to the $container element, it is very easy to create your own CSS transitions and namespace them with whatever transition class you'd like. Olay comes with:
      • 'js-olay-scale-up'
      • 'js-olay-scale-down'
      • 'js-olay-slide'
      • 'js-olay-flip'
    • transitionDuration 250 - The duration of the transition in milliseconds. IMPORTANT! The transitionDuration must match transition-duration in your CSS to work properly.
    • hideOnKeys [27] - An array of keycodes that should hide the olay when pressed. Set to [] or a falsy value to disable.
    • hideOnClick true - A boolean specifiying whether the olay should be hidden when anything outside the $content element is clicked.
    • ariaLabel - A label to describe the olay for ARIA compliance.
    • preserve false - If true, detach will be used to remove the $container rather than remove. This effectively _preserve_s the jQuery data associated with olay's DOM elements so they can be re-appended later. Use this option if you are going to be showing and hiding the same DOM elements repeatedly.

The jQuery object that is added to and removed from <body>. It contains all of the elements necessary for the olay. It also keeps a record of its corresponding olay instance in $'olay'). Style the container using the .js-olay-container selector in CSS.

A <div> with display: table for reliable centering in those silly IE browsers.

Naturally, a <div> with display: table-cell to live inside $table.

The wrapper <div> for $el. Style the content wrapper using the .js-olay- content selector in CSS>

A jQuery object representing the element that was passed in the constructor. As mentioned below, 'show' and 'hide' events are triggered on this object.

Show the olay, appending $container to the DOM.

Hide the olay. Note: $container is removed from the DOM with jQuery's remove method.

Set the $el property and properly append it to $content. This allows the creation of "empty" olay instances to be populated later.

Remove the $container from the DOM using jQuery's remove. This _destroy_s all jQuery data (.data, events, etc.) that was associated with the $container and its children. This will be handled automatically and should only ever need to be called when preserve is true.

Olay uses jQuery's event emitter to fire 'olay:show' and 'olay:hide' events when show or hide are invoked. See the example above for usage.

Any element with the 'js-olay-hide' class inside an olay will hide its parent olay once clicked. This makes adding close/hide buttons as easy as <span class='js-olay-hide'>Close</span>.