Overlay

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

A flexible, responsive overlay plugin. Implements the WAI-ARIA Dialog (Modal) design pattern.

Working example

How to implement

For centred popups, please see the Lightbox documentation.

  1. Create a section element with a unique id and the following classes wb-overlay modal-content overlay-def.

    <section id="unique-id" class="wb-overlay modal-content overlay-def wb-bar-t"></section>

  2. Add one of the following classes to the section element to configure the type of overlay:

    • wb-panel-l: Left panel
    • wb-panel-r: Right panel
    • wb-bar-t: Top bar
    • wb-bar-b: Bottom bar
    • wb-popup-full: Full-screen overlay
    • wb-popup-full hidden-hd: Full-screen overlay - Hidden header

  3. Add the header of the overlay by adding the following code at the start of the section element:

    <header class="modal-header">
	<h2 class="modal-title">Overlay title</h2>
</header>

    For the full-screen overlay with a hidden header, use the following instead:

    <header>
	<h2 class="wb-inv">Overlay title</h2>
</header>

  4. Add the body of the overlay by adding the following code after the header code:

    <div class="modal-body">
	... Overlay content ...
</idv>

  5. Add a way of opening the overlay. The overlay can be opened either by clicking a link or by triggering an event.

    • Link approach: Add the following link to the page where the href and the aria-controls attribute match the id attribute on the section element of the overlay:

      <li>
	<a href="#unique-id" aria-controls="unique-id" class="overlay-lnk" role="button">Open overlay</a>
</li>

    • Event approach: Trigger the overlay with the following JavaScript code:

      $( "#unique-id" ).trigger( "open.wb-overlay" );

Configuration options

Coming soon

Option Description How to configure Values
Overlay type Configure the type of overlay to display. Add the configuration class to the section element of the overlay.
wb-panel-l:
Left panel
wb-panel-r:
Right panel
wb-bar-t:
Top bar
wb-bar-b:
Bottom bar
wb-popup-full:
Full-screen overlay

Events

Event Trigger What it does
wb-init.wb-overlay Triggered manually (e.g., $( ".wb-overlay" ).trigger( "wb-init.wb-overlay" );). Used to manually initialize the Overlay plugin. Note: The Overlay plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-overlay (v4.0.5+) Triggered automatically after an overlay is initialized. Used to identify when an overlay has initialized (target of the event) 
$( document ).on( "wb-ready.wb-overlay", ".wb-overlay", function( event ) {
});
$( ".wb-overlay" ).on( "wb-ready.wb-overlay", function( event ) {
});
open.wb-overlay Triggered manually (e.g., $( ".wb-overlay" ).trigger( "open.wb-overlay" );). Used to manually open an overlay (event must be triggered on the section element of the overlay).
close.wb-overlay Triggered manually (e.g., $( ".wb-overlay" ).trigger( "close.wb-overlay" );). Used to manually close an overlay (event must be triggered on the section element of the overlay).
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Overlay plugin source code on GitHub

Date modified: