Search


Overlay

Purpose

A flexible, responsive overlay plugin.

Examples

Opening overlays through JavaScript

Overlays can be opened through JavaScript with:

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

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

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", "#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 overlay-close" type="button">Close overlay/modal</button>
</div>

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

Middle overlay with a background

Add the CSS overlay-bg to the overlay dialog to stand up the overlay dialog with a black overlay background.

Middle screen overlay with background

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

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

Page details

Date modified: