Overlay
Purpose
A flexible, responsive overlay plugin.
Examples
-
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>
-
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>
-
View code
<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>
-
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>
-
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>
-
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>
-
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.
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
).
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>
- Date modified: