Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    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.'); });;


    new Olay([el [, options]])

    • 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:show'/'olay:hide' Events

    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.

    'js-olay-hide' Class

    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>.




    npm i olay

    Downloadsweekly downloads







    last publish


    • avatar