JSFiddle - React, Tailwind, and code Playground

HTML

<!-- https://www.guidgenerator.com/online-guid-generator.aspx -->
<a id="linkOpen" href="#uuid=8411f73d-20e9-47d9-95fa-0106f03fdfa4">
    Abrir Modal
</a>

<div id="modal" class="hide"></div>
<div id="popup" class="hide">
    <div id="menu">
        <a id="linkFechar" href="#fechar" >Fechar Modal</a>    
    </div> 
    <div id="content">
        
    </div>
</div>

CSS

#modal {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    opacity: 0.7;
    background-color: gainsboro;
}

#popup {
    position: fixed;
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}

#menu {    
    height: 4%;  
}

#content {    
    height: 96%; 
    overflow: auto;
}

.hide {
    display: none;    
}

a:visited {
    color: #0099ff;    
}

JavaScript

var linkOpen = document.getElementById("linkOpen");
var linkFechar = document.getElementById("linkFechar");
var modal = document.getElementById("modal");
var popup = document.getElementById("popup");
var content = document.getElementById("content");

linkOpen.onclick = function(element) {    
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //content.innerHTML = xmlhttp.response;
            content.innerHTML = loremIpsum;
            modal.classList.remove("hide");
            popup.classList.remove("hide");
            
            var hrefAtual = window.location.href;
            history.pushState(null, null, linkOpen.href);
            history.pushState(null, null, hrefAtual);
        }
    }

    xmlhttp.open("GET", this.href, true);
    xmlhttp.send();
    
    element.preventDefault();
};

linkFechar.onclick = function (element) {
    modal.classList.add("hide");    
    popup.classList.add("hide");    
    element.preventDefault();
}

var loremIpsum = "";
loremIpsum += "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis purus vel tellus congue efficitur. Donec auctor scelerisque ipsum, ut laoreet nunc tristique sit amet. Vestibulum placerat sodales ipsum. Aenean pharetra fermentum enim sed gravida. Nullam a varius ante. Proin a efficitur quam, quis tincidunt purus. Maecenas vestibulum nunc fringilla tortor tincidunt tempor. Nam venenatis commodo leo. Etiam at ultrices enim. Donec luctus, felis eget egestas tincidunt, dui mauris ornare tellus, sit amet semper odio metus a felis. Quisque nec tortor metus. Aenean in ornare orci. Aenean venenatis tortor at venenatis fermentum. Proin volutpat varius diam non mattis. Quisque non leo mi. Integer vitae ligula suscipit, mattis ipsum eget, tempus neque.</p>"

loremIpsum += "<p>Suspendisse convallis turpis at quam rutrum convallis. Proin urna dui, pulvinar a laoreet id, mattis...