Overlay

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>

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

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

(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 );

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

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