Warning / Notice Popup or Banner

This script is useful for announcements. A floating button is visible to bring the popup again if needed. Includes a checkbox to turn it off next time the script is triggered. 

JavaScript

(function popup({ position = "center" } = {}) {

    const popupKey = "showPopup";

    const existingPopup = document.getElementById("popupContainer");

    if (existingPopup) return;

    

    const shouldShowPopup = localStorage.getItem(popupKey) !== "false";

    const popupContainer = document.createElement("div");

    popupContainer.id = "popupContainer";

    popupContainer.style.position = "fixed";

    popupContainer.style.textWrapStyle = "balance";

    popupContainer.style.padding = "0px 0px 5px 0px";

    popupContainer.style.fontFamily = "verdana";

    popupContainer.style.background = "navy";

    popupContainer.style.color = "yellow";

    popupContainer.style.boxShadow = "0px 4px 6px rgba(0, 0, 0, 0.1)";

    popupContainer.style.borderRadius = "8px";

    popupContainer.style.textAlign = "center";

    popupContainer.style.zIndex = "1000";

  

    switch (position) {

        case "top":

            popupContainer.style.top = "10px";

            popupContainer.style.left = "50%";

            popupContainer.style.transform = "translateX(-50%)";

            break;

        case "bottom":

            popupContainer.style.bottom = "10px";

            popupContainer.style.left = "50%";

            popupContainer.style.transform = "translateX(-50%)";

            break;

        case "left":

            popupContainer.style.top = "50%";

            popupContainer.style.left = "10px";

            popupContainer.style.transform = "translateY(-50%)";

            break;

        case "right":

            popupContainer.style.top = "50%";

            popupContainer.style.right = "10px";

            popupContainer.style.transform = "translateY(-50%)";

            break;

        case "top-left":

            popupContainer.style.top = "10px";

            popupContainer.style.left = "10px";

            break;

        case "top-right":

            popupContainer.style.top = "10px";

            popupContainer.style.right = "10px";

            break;

        case "bottom-left":

            popupContainer.style.bottom = "10px";

            popupContainer.style.left = "10px";

            break;

        case "bottom-right":

            popupContainer.style.bottom = "10px";

            popupContainer.style.right = "10px";

            break;

        case "banner":

            popupContainer.style.top = "0";

            popupContainer.style.left = "0";

            popupContainer.style.width = "100%";

            popupContainer.style.borderRadius = "0";

            break;

        default:

            popupContainer.style.top = "50%";

            popupContainer.style.left = "50%";

            popupContainer.style.transform = "translate(-50%, -50%)";

    }

    popupContainer.innerHTML = `

        <p>This popup can be shown at the top, center, right or left. Just change the parameter at the end of the script. Currently is set as ${position}. Feel free to change the style within the code</p>

        <label>

            <input type="checkbox" id="dontShowAgain" ${shouldShowPopup ? "" : "checked"}> Don't show this again

        </label>

        <br>

        <button id="closePopup">Close</button>

    `;

    document.body.appendChild(popupContainer);

    document.getElementById("closePopup").onclick = () => {

        if (document.getElementById("dontShowAgain").checked) {

            localStorage.setItem(popupKey, "false");

        } else {

            localStorage.setItem(popupKey, "true");

        }

        popupContainer.remove();

    };

    let restoreButton = document.getElementById("restorePopupButton");

    if (!restoreButton) {

        restoreButton = document.createElement("button");

        restoreButton.id = "restorePopupButton";

        restoreButton.textContent = "Show Popup Again";

        restoreButton.style.position = "fixed";

        restoreButton.style.top = "42px";

        restoreButton.style.right = "10px";

        restoreButton.style.padding = "10px";

        restoreButton.style.background = "#007bff";

        restoreButton.style.color = "white";

        restoreButton.style.border = "none";

        restoreButton.style.borderRadius = "5px";

        restoreButton.style.cursor = "pointer";

        restoreButton.onclick = () => {

            localStorage.setItem(popupKey, "true");

            popup({ position });

        };

        document.body.appendChild(restoreButton);

    }

    

    if (!shouldShowPopup) {

        popupContainer.remove();

    }

})({ position: "banner" });