Javascript 弹出框功能无响应？

Question

我当时正在从事一个大型元素，在制作弹出框时遇到了 javascript 和 CSS 的一些问题。我曾希望我可以调用一个 javascript 函数来使它的不同版本出现，但它永远不会出现，除非在关闭之后......

这是我的代码:

<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>

如果有人能告诉我如何解决我在这里遇到的任何 javascript 或 php 问题，以便不同的版本针对不同的功能打开，甚至可能在示例中演示 onClick 代码以证明它有效，我会很高兴？

:)

Answer 1

您正在使用自调用函数“closePopUp();”这就是为什么它在屏幕加载时不弹出的原因