我正在尝试编写一个简短的html / javascript，显示我定义的弹出框。重要提示：它们不应该在开头出现。
但是，它们也会在开头显示（而不是隐藏）。你知道我做错了什么吗？
这里是代码：
<script>
$(document).ready(function(){
setTimeout(function(event){ // Öffnet 1.Box nach x Sekungen
loadPopupBox(); -maxSpeed/0.1
}, 7000);
$("#popupclose").click(function(event){
unloadPopupBox(); // Schliesst 1. Box mit Click
setTimeout(function(event2) { // Öffnet 2. Box nach x Sekunden
loadPopupBox2(); -maxSpeed/0.1
}, 500);
setTimeout(function(event2) { // Schliesst 2. Box nach x Sekunden
unloadPopupBox2()
}, 3500);
setTimeout(function(event3){
loadPopupBox3(); -maxSpeed/0.1 //Öffnet 3. Box nach x Sekunden
}, 15000);
});
$("#popupclose3").click(function(event4)
{
unloadPopupBox3();
setTimeout(function(event4) {
loadPopupBox4(); -maxSpeed/0.1}, 500);
setTimeout(function(event4) { // Schliesst 4. Box nach x Sekunden
unloadPopupBox4()}, 3500);
setTimeout(function(event5) {
loadPopupBox5(); -maxSpeed/0.1 }, 15000);
});
$("#popupclose5").click(function(event6)
{
unloadPopupBox5();
setTimeout(function() { loadPopupBox6(); -maxSpeed/0.1}, 500);
setTimeout(function(event6) { // Schliesst 5. Box nach x Sekunden
unloadPopupBox6()}, 4500);
});
function loadPopupBox()
{
$("#popupbox").fadeIn("slow");
}
function loadPopupBox2()
{
$("#popupbox2").fadeIn("slow");
}
function loadPopupBox3()
{
$("#popupbox3").fadeIn("slow");
}
function loadPopupBox4()
{
$("#popupbox4").fadeIn("slow");
}
function loadPopupBox5()
{
$("#popupbox5").fadeIn("slow");
}
function loadPopupBox6()
{
$("#popupbox6").fadeIn("slow");
}
function unloadPopupBox()
{
$("#popupbox").fadeOut("normal");
}
function unloadPopupBox2()
{
$("#popupbox2").fadeOut("normal");
}
function unloadPopupBox3()
{
$("#popupbox3").fadeOut("normal");
}
function unloadPopupBox4()
{
$("#popupbox4").fadeOut("normal");
}
function unloadPopupBox5()
{
$("#popupbox5").fadeOut("normal");
}
function unloadPopupBox6()
{
$("#popupbox6").fadeOut("normal");
}
$("#popupbox").hide();
$("#popupbox2").hide();
$("#popupbox3").hide();
$("#popupbox4").hide();
$("#popupbox5").hide();
$("#popupbox6").hide();
});
</script>
<style>
#wings { margin-top:100px; margin-left:150px; font:bold 13px sans-serif; background:orange;
float:left; padding:6px; }
#popupbox { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:170px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox2 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:190px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose2 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox3 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:175px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose3 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox4 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:165px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose4 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox5 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:200px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose5 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox6 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:150px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose6 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
</style>
<div id="popupbox">
<div style="height:75px; margin-left: 70px"><img id="popupclose" src="images/Picturenavigation.png" width="300" height="150" alt="Picturenavigation" title="Picturenavigation" border="0"></div>
</br></br>
<table>
</br></br></br>
<tr><td><center>Picturebook Navigation uses the coordinates of photos to navigate. </center></td></tr>
<tr><td><b><center>Click on the picture to start your journey.</center></b></td></tr>
</table>
</div>
<div id="popupbox2">
<div style="height:120px; margin-left: 60px"><img id="popupclose2" src="images/Naviroute3.jpg" width="300" height="150" alt="Naviroute3" title="Naviroute3" border="0"></div>
<table>
</br> </br>
<tr><td><center>Navigation with connect is that easy: You are on your way now!</center></td></tr>
</table>
</div>
<div id="popupbox3">
<div style="height:120px; margin-left:90px;"><img id="popupclose3" src="images/Connect_Menu.jpg" width="300" height="150" alt="Connect_Menu" title="Connect_Menu" border="0"></div>
<table>
</br></br>
<tr><td>Have you ever wondered about the latest news on your favorite team </br>or what the weather will look like at your travel destination?</td></tr>
<tr><td><b>Click on the connect menu to continue your drive and stay informed.</b></td></tr>
</table>
</div>
<div id="popupbox4">
<div style="height:120px; margin-left:60px;"><img id="popupclose4" src="images/Weather.jpg" width="300" height="150" alt="Weather" title="Weather" border="0"></div>
</br>
<table>
</br></br>
<tr><td><center>The weather is going to be nice tomorrow: No need for an umbrella.</center></td></tr>
</table>
</div>
<div id="popupbox5">
<div style="height:60px;"><img id="popupclose5" src="images/Bild1.png" width="80" height="76" alt="Bild1" title="Bild1" border="0"style="float:right;"></div>
</br>
<table>
<tr><td>Send a friend a message: <i>"Hi, it's me. I am on the way." </i></td></tr>
<tr><td></tr></td>
<tr><td>Type in this phone number in the space below: +1425637089.</td></tr>
<tr><td>Phone Number : <input type="text" size="30%"></td></tr>
<tr><td><b>Click on the picture to send the message.</b></td></tr>
</table>
</div>
<div id="popupbox6">
<div style="height:180px; margin-left:155px;"><img id="popupclose6" src="images/Message_received.png" width="125" height="190" alt="Message Received" title="Message Received" border="0"></div>
<table>
</br>
<tr><td>Look how easy this was! Your message already has been received.</td></tr>
</table>
</div>
答案 0 :(得分：0)
我的第一个建议是将代码格式化得更干净。当一切都是可读的时，找到错误要容易得多。另外，你的js包含很多重复代码，这可能就是为什么这个问题被大量投票了。
对于实际答案，你从未真正隐藏弹出框。在css中，你需要设置#popupbox1 {display：none;对于页面上的每个框。更好的是使用课程，但你真的没有在这里设置。