Accessible Over lays that don't suck!
Olay's one dependency is jQuery, so include that before Olay.
...or use bower...
bower install olay
Try running this code on the demo page.
// Show "¡Olé!" for one second and then hide, alerting "Farewell, mí amigo.".var olay = '<h1>¡Olé!</h1>' duration: 1000;olay$el;olay;
- el - a jQuery object, DOM node, jQuery selector or raw HTML.
- options - An optional object with any or all of the following...
0- The number of milliseconds to display the olay before automatically invoking
0duration means the olay will be displayed indefinitely.
'js-olay-scale-up'- The transition to use. Since this property simply refers to the class that will be added to the
$containerelement, it is very easy to create your own CSS transitions and namespace them with whatever transition class you'd like. Olay comes with:
250- The duration of the transition in milliseconds. IMPORTANT! The
transition-durationin your CSS to work properly.
- An array of keycodes that should hide the olay when pressed. Set to
or a falsy value to disable.
true- A boolean specifiying whether the olay should be hidden when anything outside the
$contentelement is clicked.
- ariaLabel - A label to describe the olay for ARIA compliance.
detachwill be used to remove the
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
$container.data('olay'). Style the container using the
.js-olay-container selector in CSS.
display: table for reliable centering in those silly IE
display: table-cell to live inside
$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
'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
$el property and properly append it to
$content. This allows the
creation of "empty" olay instances to be populated later.
$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
Olay uses jQuery's event emitter to fire
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