Javascript pop-up box functions unresponsive?

Question

I was working on a massive project and had some issues with the javascript and CSS for making a pop up box. I had hoped that I could call a javascript function to make different versions of it appear but it didn't ever appear unless after having been closed...

Here's my code:

<div  id='popup' style='display: hidden; background-color: white; padding: 2vw; position: fixed; top: 5%; right: 25%; z-index: 999; width: 50vw; height: auto; margin-left: 15; margin-right: 15; border-style: solid; border-color: #181818;'>
<a  class="sidebar" style="position:absolute; top:0 ;right: 1vw;font-size: 36px; margin-left: 50px;" #href="javascript:void(0)" class="closebtn" onclick="closePopUp()">&times;</a> <!-- The button which activates Javascript to close the pop up box -->
<img id='cookiepic' src='cookie.jpg' style='width: 3vw; height: 3vw; display: hidden;'>
<p class='spacedfont' style='display: inline' > &nbsp Oh, and by the way...</p>
<hr>
<div style='display: flex; flex-direction: row; display:hidden;' id='cookieinfo'>
<p id='cookiep'>
As is common practice with almost all professional websites this site uses cookies, which are tiny files that are downloaded to your computer, to improve your experience.
<br><br>This page describes what information they gather, how we use it and why we sometimes need to store these cookies.
<br><br>We will also share how you can prevent these cookies from being stored however this may downgrade or 'break' certain elements of the sites functionality.
<br><br>By closing this notice or continuing to use the page, you consent to our use of cookies.
</p>

</div>

<div style='display: flex; flex-direction: row; display:hidden;' id='aboutinfo'>
<p id='aboutp'>
We're a fresh business to the world of e-commerce that aims to bring you the best experience shopping online.
Our business is based in the UK but our web of business relationships stretches worldwide to deliver you the best service.
<br><br>Part of our ethos is innovation, a key role in our success which allows us to scour the globe for offers and deals to bring to you almost daily. Be sure to check the featured panel for a taster of what we've found recently!
<br><br>If you'd like to know anything else, email a member of our friendly team at xxxxx@gmail.com
</p>

</div>
</div>




<script>
function closePopUp() {
    document.getElementById("popup").style.display = "none";
    document.getElementById("cookieinfo").style.display = "none";
    document.getElementById("cookiepic").style.display = "none";
    document.getElementById("aboutinfo").style.display = "none";
}
function openPopUp() {
    document.getElementById("popup").style.display = "visible";

}
function showCookie() {
    document.getElementById("popup").style.display = "visible";
    document.getElementById("cookieinfo").style.display = "visible";
    document.getElementById("cookiepic").style.display = "inline";
}
function showAbout() {
    document.getElementById("popup").style.display = "visible";
    document.getElementById("aboutinfo").style.display = "visible";
}

closePopUp();
showAbout();
</script>

I would love it if someone could tell me how to fix whatever javascript or php issue I have here so that the different versions open for different functions and perhaps even demonstrate the onClick code on an example to prove it works?

:)

Answer 1

you are using a self calling function"closePopUp();" that's why its not poping up when the screen loads