Simple modal script

See it being used below:

To use this, paste this below <body>:

<div class="modal">
<div class="popup">
<h1>Modal Title</h1>
<p>Modal Text</p>
<div class="btn-confirm"><button onclick="modalAccept()">OK</button> <button onclick="modalCancel()">Cancel</button></div>
</div>
</div>

Copied!

Then put this inside a <style> tag:

.modal{
background: rgba(0,0,0,0.5);
z-index:999;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup{
background:#fff;
height:fit-content;
}
        
.popup h1{
padding:0 0.5em 0 0.2em;
}
.popup p{
padding:0 0.5em 0 0.5em;
}

.popup .btn-confirm{
margin:0.5em;
display: flex;
flex-direction: row;
justify-content: flex-end; 
gap:0.5em;
}

.noscroll{
overflow-x: hidden;
overflow-y: hidden;
}

Copied!

And finally, paste this inside a <script> tag before </body>:

var modalDisplay = document.querySelector(".modal");
var docNoScroll = document.documentElement;

function modalCancel(){
location.href = "/index.html";
// the uncommented part above redirects you to the index page but really you can do whatever you want with this
}

function modalAccept(){
localStorage.setItem("modalDisabled","true");
modalDisplay.style.display = "none";
docNoScroll.classList.remove("noscroll");
}

document.addEventListener('DOMContentLoaded', function() {
if ("modalDisabled" in localStorage === false){
modalDisplay.style.display = "flex";
docNoScroll.classList.add("noscroll");
}else{

}

});

Copied!

That would be it, mostly.
If you want to test the functionality for whatever reason, I strongly advice opening dev tools and running localStorage.getItem("modalDisabled") or localStorage.removeItem("modalDisabled") !!

If you use this, you don't need to credit me, but it'd be very nice if you did n_n