Popup 2

// Created fora an Articles on:
// https://www.html5andbeyond.com/session-storage-display-popup-advert/

jQuery(document).ready(function($){

if (sessionStorage.getItem(‘advertOnce’) !== ‘true’) {
$(‘body’).append(‘

‘)
sessionStorage.setItem(‘advertOnce’,’true’);
}

$(‘#advert-once .advert-button’).on(‘click’,function(){
$(‘#advert-once’).hide();
});

$(‘#reset-session’).on(‘click’,function(){
sessionStorage.setItem(‘advertOnce’,”);
});

});

Display Content Only Once Per Session

Refresh Page Only
Reset Session Variable and Refresh Page

body {
background-color: #111;
font-family: ‘Oswald’, sans-serif;
color: #fff;
}

#advert-once {
position: fixed;
bottom: 5px;
right: 5px;
display: inline-block;
background-color: #333;
padding: 5px 5px 0;
z-index: 99999;
}

#advert-once .advert-button {
width: 10px;
height: 10px;
position: absolute;
left: -3px;
top: -3px;
background-color: #ff4500;
border-radius: 5px;
cursor: pointer;
}

#reset-session, #refresh-page {
display: block;
width: 250px;
text-align: center;
font-family: ‘Oswald’, sans-serif;
border-radius: 5px;
border: none;
padding: 2px 5px;
cursor: pointer;
background-color: #ddd;
margin: 5px 0;
}

#reset-session:hover, #refresh-page:hover {
background-color: #f96e5b;
}

Popup Test




jQuery UI Dialog – Default functionality


This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.


Long Glossary

Share this Image On Your Site

Infographic Test

Share this Image On Your Site