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（）;”这就是为什么在屏幕加载时它不会弹出

JavaScript弹出框功能无法响应？

1 个答案: