@berlinsms/overlay v1.0.5

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

Functions

Meaning of the parameters

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