DARKBOX

[ back ]

a "plug and play" lightbox script that utilizes local storage to make sure that it never shows up again (until cookies are cleared) after the user clicks on the button.

you can put this on every single page to make sure that your viewers absolutely see your warning.

HTML

put this in your <body> or it won't work.

JAVASCRIPT

edit lightBoxCss and lightBoxHtml to your liking.

// set your warnings and button text here.
// you may just have one warning if you want.
// this code is by hellaonwheels.art / Hunter
var warningText = [
    `this is a one time warning lightbox.`,
    `you can use multiple warnings.`,
    `click below to close this forever until localStorage is deleted.<br>refreshing will not make this show up again.`
]
var buttonText = [
    `proceed`,
    `proceed again`,
    `close`
]

// the css for the lightbox so you don't have to make a new css file.
const lightBoxCss = `
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000;
font-family: consolas, monospace;
color: #FFF;
font-size: 16pt;
text-align: center;
z-index: 100;`;

// button css
const buttonCss = `
display: block;
background-color: #fff;
padding: 10px;
margin: 10px auto;
border: none;
font-size: 20pt;
font-family: consolas, monospace;
cursor: pointer;
border-radius: 10px;`;

// do not touch anything below unless you know what you're doing

const createBox = document.createElement("div");
const createButton = document.createElement("button");
const verified = localStorage.getItem("darkboxverify");

if (verified != "true"){
    document.body.appendChild(createBox);
    createBox.style.cssText = lightBoxCss;
    createBox.innerHTML = warningText[0];
    
    createBox.appendChild(createButton);
    createButton.id = "warningbutton";
    createButton.style.cssText = buttonCss;
    createButton.innerHTML = buttonText[0];
}

// data storage to display next data in array
var i = 0;
// grab button
var warningButton = document.getElementById("warningbutton");

// add listener for button
if (warningButton) {
    warningButton.onclick = function() {
        // if last box in array, then hide element, set localStorage to true, then stop function
        if (i === warningText.length - 1){
            warningButton.parentElement.style.display = "none";
            localStorage.setItem("darkboxverify", "true");  
            return;
        }

// add 1 to i to display next text
        i = i + 1;
        createBox.innerHTML = warningText[i];
        createBox.appendChild(createButton);
        createButton.innerHTML = buttonText[i];
    };
}

CLEARING LOCAL STORAGE

to test this, it's as simple as Inspect, go to Console, then type in localStorage.clear(); then Run the script.