JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div id="header-links">
    <button id="aboutinfo">About</button>
    <div id="overlay"></div>
    <div id="popup">
        <p>About Info Here</p>
        <button id="closeaboutinfo">Close</button>
    </div>
    <button id="contactinfo">Contact</button>
    <div id="overlay"></div>
    <div id="popup">
        <p>Contact with this email address</p>
        <button id="closecontactinfo">Close</button>
    </div>
</div>

CSS

#overlay {
    display:none;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:99999;
}
#popup {
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:150px;
    margin-top:-75px;
    margin-left:-150px;
    background:#FFFFFF;
    border:2px solid #000;
    z-index:100000;
}

JavaScript

window.onload = function () {
    document.getElementById("aboutinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };

    document.getElementById("closeaboutinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";
    };

    document.getElementById("contactinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };

    document.getElementById("closecontactinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";
    };
}