- Skip to main content
- Skip to "About this site"

# Overlay

- Documentation
- Questions or comments?

## Purpose

A flexible, responsive overlay plugin.

## Examples

- Left-panel

  View code

      <p><a href="#left-panel" aria-controls="left-panel" class="overlay-lnk" role="button">Left-panel</a></p>

      <section id="left-panel" class="wb-overlay modal-content overlay-def wb-panel-l">
      	<header class="modal-header">
      		<h2 class="modal-title">Left panel</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

- Right-panel

  View code

      <p><a href="#right-panel" aria-controls="right-panel" class="overlay-lnk" role="button">Right-panel</a></p>

      <section id="right-panel" class="wb-overlay modal-content overlay-def wb-panel-r">
      	<header class="modal-header">
      		<h2 class="modal-title">Right panel</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

- Top bar

  View code

  Top bar

      <a href="#top-bar" aria-controls="top-bar" class="overlay-lnk" role="button">Top bar</a></p>

      <section id="top-bar" class="wb-overlay modal-content overlay-def wb-bar-t">
      	<header>
      		<h2 class="modal-title">Top bar</h2>
      	</header>
      	...
      </section>

- Bottom bar

  View code

      <p><a href="#bottom-bar" aria-controls="bottom-bar" class="overlay-lnk" role="button">Bottom bar</a></p>

      <section id="bottom-bar" class="wb-overlay modal-content overlay-def wb-bar-b">
      	<header>
      		<h2 class="modal-title">Bottom bar</h2>
      	</header>
      	...
      </section>

- Centred popup (Lightbox)

  View code

      <p><a href="#centred-popup" aria-controls="centred-popup" class="wb-lbx" role="button">Centred popup (Lightbox)</a></p>

      <section id="centred-popup" class="mfp-hide modal-dialog modal-content overlay-def">
      	<header class="modal-header">
      		<h2 class="modal-title">Centred popup (Lightbox)</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

- Centred popup - Modal (Lightbox + Modal)

  View code

      <p><a href="#centred-popup-modal" aria-controls="centred-popup-modal" class="wb-lbx lbx-modal" role="button">Centred popup - Modal (Lightbox + Modal)</a></p>

      <section id="centred-popup-modal" class="mfp-hide modal-dialog modal-content overlay-def">
      	<header class="modal-header">
      		<h2 class="modal-title">Centred popup - Modal (Lightbox + Modal)</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

- Middle screen overlay

  View code

      <p><a href="#mid-screen" aria-controls="mid-screen" class="overlay-lnk" role="button">Middle screen overlay</a></p>

      <section id="mid-screen" class="wb-overlay modal-content overlay-def wb-popup-mid">
      	<header class="modal-header">
      		<h2 class="modal-title">Middle screen overlay</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

- Full-screen overlay

  View code

      <p><a href="#full-screen" aria-controls="full-screen" class="overlay-lnk" role="button">Full-screen overlay</a></p>

      <section id="full-screen" class="wb-overlay modal-content overlay-def wb-popup-full">
      	<header class="modal-header">
      		<h2 class="modal-title">Full-screen overlay</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

- Full-screen overlay - Hidden header

  View code

      <p><a href="#hidden-header" aria-controls="hidden-header" class="overlay-lnk" role="button">Full-screen overlay - Hidden header</a></p>

      <section id="hidden-header" class="wb-overlay modal-content wb-popup-full hidden-hd">
      	<header>
      		<h2 class="wb-inv">Full-screen overlay - Hidden header</h2>
      	</header>
      	<div class="modal-body">
      		...
      	</div>
      </section>

### Opening overlays through JavaScript

Overlays can be opened through JavaScript with:

    $( "#overlayId" ).trigger( "open.wb-overlaylbx" );

For an example of opening Lightbox popups through JavaScript, see Opening popups through JavaScript.

Overlay to open

#### Code

View code

##### HTML

    <label for="overlay-select">Overlay to open</label>
    <select id="overlay-select">
    	<option value="left-panel">Left panel</option>
    	<option value="right-panel">Right panel</option>
    	<option value="top-bar">Top bar</option>
    	<option value="bottom-bar">Bottom bar</option>
    	<option value="mid-screen">Middle screen overlay</option>
    	<option value="full-screen">Full-screen overlay</option>
    	<option value="hidden-header">Full-screen overlay - Hidden header</option>
    </select>
    <button id="overlay-open-btn">Open overlay</button>

##### JavaScript

    (function( $, wb ) {
    "use strict";

    wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
    	if ( event.stopPropagation ) {
    		event.stopImmediatePropagation();
    	} else {
    		event.cancelBubble = true;
    	}

    	$( "#" + $( "#overlay-select" ).val() ).trigger( "open.wb-overlay" );
    });

    })( jQuery, wb );

### Adding custom close buttons to overlays/modals

Overlays/Modals through JavaScript are automatically updated with a close overlay/modal button. This button can be changed with the following code:

    <div class="modal-footer">
    ...
    <button class="btn btn-primary popup-modal-dismiss" type="button">Close overlay/modal</button>
    </div>

Side Note: Close buttons must be inside the modal footer (a div with the class `modal-footer`).

## Left panel

- Link 1
- Link 2
- Link 3
- Link 4
- Link 5
- Link 6

## Right panel

- Link 1
- Link 2
- Link 3
- Link 4
- Link 5
- Link 6

## Top bar

## Bottom bar

## Centred popup (Lightbox)

1. ordered list (`ol`) first level default appearance
2. ordered list (`ol`) first level default appearance
   1. ordered list (`ol`) second level default appearance
   2. ordered list (`ol`) second level default appearance
      1. ordered list (`ol`) third level default appearance
      2. ordered list (`ol`) third level default appearance

Link default appearance

## Centred popup - Modal (Lightbox + Modal)

1. ordered list (`ol`) first level default appearance
2. ordered list (`ol`) first level default appearance
   1. ordered list (`ol`) second level default appearance
   2. ordered list (`ol`) second level default appearance
      1. ordered list (`ol`) third level default appearance
      2. ordered list (`ol`) third level default appearance

## Middle screen overlay

1. ordered list (`ol`) first level default appearance
2. ordered list (`ol`) first level default appearance
   1. ordered list (`ol`) second level default appearance
   2. ordered list (`ol`) second level default appearance
      1. ordered list (`ol`) third level default appearance
      2. ordered list (`ol`) third level default appearance

## Full-screen overlay

1. ordered list (`ol`) first level default appearance
2. ordered list (`ol`) first level default appearance
   1. ordered list (`ol`) second level default appearance
   2. ordered list (`ol`) second level default appearance
      1. ordered list (`ol`) third level default appearance
      2. ordered list (`ol`) third level default appearance

## Full-screen overlay - Hidden header

1. ordered list (`ol`) first level default appearance
2. ordered list (`ol`) first level default appearance
   1. ordered list (`ol`) second level default appearance
   2. ordered list (`ol`) second level default appearance
      1. ordered list (`ol`) third level default appearance
      2. ordered list (`ol`) third level default appearance

Date modified:
  2014-07-22