Onload messages overlay

Implemented using onscreen JavaScript

by Hugo Carneiro

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<p><a href="#" class="btn btn-block btn-danger" id="reset-messages">Reset Onload Messsages</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a...

CSS

.scrollable {
    height: 400px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*
===========================
CONTENTS:

01 Overlay 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Overlay --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body.overlayIsActive {
    overflow: hidden;
}

body.overlayIsActive > :not(.overlay),
body.overlayIsActive > :not(.overlay) * {
	pointer-events: none;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: none;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transform: translate3d(0,0,0);
    pointer-events: none;
}

.overlay.active {
	pointer-events: all;
}

.overlayPanelScreen {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 19999;
	background: rgba(0,0,0,0.7);
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	opacity: 0;
	pointer-events: none;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

.overlay.active .overlayPanelScreen {
	opacity: 1;
	pointer-events: all;
}

.overlayPanel {
	position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
	background: rgba(0,0,0,0.3);
	z-index: 20000;
	padding: 0px;
	-webkit-border-radius: 5px;
 	-webkit-transform: translate3d(0,0,0) scale(0);
 	transform: translate3d(0,0,0) scale(0);
}

.overlay.active .overlayPanel {
 	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.overlay-sm .overlayPanel {
    width: 70%;
    left: 15%;
    right: 15%;
    top: 15%;
    bottom: 15%;
}

@media screen and (min-width:...

JavaScript

var launchWelcome = function(){
    if ( typeof window.seenOverlays === 'undefined' || (typeof window.seenOverlays !== 'undefined' && window.seenOverlays.data.seenIDs.indexOf('welcomeText') < 0) ) {
        new Overlay(document.getElementById('welcomeText').innerHTML, {
            title: 'Welcome',
            showOnInit: true,
            size: 'medium',
            entranceAnim: 'bounceInRight',
            exitAnim: 'bounceOutLeft',
            afterClose: launchWhatsNew
        }, function(){
            if ( typeof window.seenOverlays !== 'undefined' ) {
                window.seenOverlays.data.seenIDs.push('welcomeText');
                window.seenOverlays.updateDevicePV();
            }
        });
    } else {
        launchWhatsNew();
    }
};

var launchWhatsNew = function(){
    if ( typeof window.seenOverlays === 'undefined' || (typeof window.seenOverlays !== 'undefined' && window.seenOverlays.data.seenIDs.indexOf('whatsNewText') < 0) ) {
        new Overlay(document.getElementById('whatsNewText').innerHTML, {
            title: 'What\'s New',
            showOnInit: true,
            size: 'medium',
            entranceAnim: 'bounceInRight',
            exitAnim: 'bounceOutLeft',
            afterClose: launchPushPrompt
        }, function(){
            if ( typeof window.seenOverlays !== 'undefined' ) {
                window.seenOverlays.data.seenIDs.push('whatsNewText');
                window.seenOverlays.updateDevicePV();
            }
        });
    } else {
        launchPushPrompt();
    }
};

var launchPushPrompt = function(){
    if ( typeof window.seenOverlays === 'undefined' || (typeof window.seenOverlays !== 'undefined' && window.seenOverlays.data.seenIDs.indexOf('pushPromptText') < 0) ) {
        new Overlay(document.getElementById('pushPromptText').innerHTML, {
            title: 'Push Prompt Message',
            showOnInit: true,
            size: 'medium',
            entranceAnim: 'bounceInRight',
            exitAnim:...