@berlinsms/overlay

jQuery Overlay

Homepage

Description

A jquery-plugin to popup an overlay.

The overlay can carry each dom you want.

The dom-elements are arranged in pages.

You can easy flipp between pages and hide and show them together with the oyerlay

Usage

Download js and css for bsms-overlay

https://static.berlinsms.de/toolsforcoder/overlay/dist/bsms-overlay.min.js
https://static.berlinsms.de/toolsforcoder/overlay/dist/bsms-overlay.css

Include jquery and js+css for bsms-overlay

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="bsms-overlay.css">
<script src="bsms-overlay.min.js"></script>

Assign overlay to your dom, but make sure, the script is fully loaded, before you assign overlay, e.g. use jquerys 'ready'

$(document).ready(function () {
    $.bsmsOverlay();
});    

Create pages for the overlay.

$(document).ready(function () {
    $.bsmsOverlay()
        .addPage();
});    

Add callbacks, if you need whem:

$(document).ready(()=>{
    $.bsmsOverlay( { closeRequested: overlayCloseRequested, onClose: overlayOnClose } );
});    
function overlayCloseRequested() {
    return confirm('Close overlay ?');
}
function overlayOnClose() {
    alert('Overlay closed');
}

If you store the return value, you can use it, to add content or show or hide the previously created page

$(document).ready(function () {
    const $page1 = $.bsmsOverlay()
        .addPage();
    $page1.append($('<p>This is any content</p>'));
    $page1.show();
});   

It is not neccessary, to store the return value, if you provide a page-identifier

$(document).ready(function () {
    $.bsmsOverlay()
        .addPage('page-id-1');
    $.bsmsOverlay()
        .getPage('page-id-1').show();
}

And of course you can use jQuerys object-chains

$(document).ready(function () {
    const $overlay = $.bsmsOverlay()
        .addPage('page-id-1',$('<p>This is page 1 content</p>'))
        .addPage('page-id-2',$('<p>This is page 2 content</p>'))
        .showPage('page-id-1,'Title-Text on Page 1')
        .getPage('page-id-2')
        .append($('<p>More content on page 2</p>'))
        .addPage('page-id-3',$('<p>This is page 3 content</p>'));
}

Options

Option	DESCRIPTION	DEFAULT
fadeInDuration	Duration the pages need to fadeIn	500
closeRequested	Callback that fires when the user clicks the cross in the top right corner. - Return true to enable closing - Return false to undo the close.	null (allow close)
onClose	Callback triggered when overlay is closed	null
showClose	shows the close-cross	true
showCredits	shows credits	true

Functions

Option	Parameter	DESCRIPTION
addPage	pagename, title, $dom	Creates a new page containing the given DOM
getPage	pagename	Retrieves a page
showPage	pagename, title, afterFadeIn	Shows a page (and calls the callback after)
hide		Hides the overlay
show		Shows the overlay

Meaning of the parameters

Parameter	Default	Description
pagename	auto-generated	page-identifier, that you can use to access to a page (will not be shown on page)
title	null	Title-text, that will be showed on the top of a page (null=dont change current title
$dom	null	Jquery-Object, that will be append to a page
afterFadeIn	null	Callback triggered when page-fade-in is finished (see fadeInDuration-option)

Remarks:

• if pagename is unknow, it will create a page with this pagename

• if pagename is empty, a random pagename is generated

• show: in page-context it will open this page, but in context of the overlay itself it opens the last shown page or an empty-page, if there is no last shown page