javascript - 如何在页面加载后弹出加载秒

Question

由于我在 JavaScript 方面没有丰富的经验，所以我已经尝试了几个小时。基本上，我修改了弹出窗口的 CSS 和 HTML 代码，这是我在网上找到的。但是，我想让弹出窗口在页面加载后 10 秒出现。我尝试了很多方法，但都没有给我想要的结果。实际上，它们都不起作用，甚至部分起作用。这是最新的方法，也没有用。

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-200;//200 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-200;//200 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}
window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        console.log( 'ESC' );
		document.getElementById('popUpDiv').style.display = 'none';
		document.getElementById('blanket').style.display = 'none';
    }
}

@charset "UTF-8";
body {
	font-family:Palatino, Baskerville, Georgia, serif;
	background:#190121;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
 #container {
	width: 780px;  
	background: #FFFFFF;
	margin: 0 auto; 
	font-size:14px;
	
	text-align: left; 
}
#mainContent {
	padding: 0 60px;
	min-height:600px;
	line-height:25px
}

img {border:0px}




/*LINKS*/

#mainContent .gamortva:link {
color:#ffffff; 
text-decoration:none; 
font-size:8px; 
background:#000000; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff; 
text-decoration:none; 
font-size:8px; 
background:#000000; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff; 
text-decoration:none; 
font-size:9px; 
background:#333333; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none; 
font-size:9px; 
background:#333333; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px
}



/*STYLES FOR CSS POPUP*/


#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
   -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
}

#popUpDiv {
	position:absolute;
	background:url(***.jpg) no-repeat;
	width:400px;
	height:400px;
	border:5px solid #000;
	z-index: 9002;
}



.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none; 
font-size:40px; 
background:#000000; 
opacity:0.8; 
-webkit-border-radius:20px;
-moz-border-radius:20px;
}

.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline; 
font-size:43px; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}

.amazonis-knopka:visited{
color:white;
}

#mainContent .gamortva:active {
color:#ffffff;
}

.popTitle {
	display: block;
	margin-top: 10px;
	text-align: center;
	background:#333333; 
	padding:19px; 
	-webkit-border-radius:100px;
	-moz-border-radius:10px;
	background: rgba(0, 0, 0, 0.5);
	display: block;
	color:white;
	font-size:23px; 
}

.popText {
	display: block;
	margin-top: 40px;
	text-align: center;
	padding:30px; 
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	background: rgba(144, 154, 56, 0.3);
	font-size:25px; 
	font-weight: bolder;
   -webkit-text-fill-color: red;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function openPopUp() {
  element = document.getElementById("popUpDiv");
 }
window.onload = setTimeout(openPopUp, 10000);
</script>
<script type="text/javascript" src="css-pop.js"></script>

</head>
<body onload="popup('popUpDiv')">
<div id="container">


  <div id="mainContent">
  
  
  
  
<p><strong>Pop Up</strong> Beta <em>V1</em></p>

    
    <div id="blanket" style="display:none;"></div>
	<div id="popUpDiv" style="display:none;">
    	<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
		<span class="popTitle">Heading!..</span>
		
		<span class="popText">Text..</span>

			 <a href="http://stackoverflow.com/" class="amazonis-knopka">Link...</a>
	</div>
  <a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
    
    

    
    
    
    
		</div>
	</div>



</body>
</html>

setTimeout代码如下:

    <script type="text/javascript">
function openPopUp() {
  element = document.getElementById("popUpDiv");
 }
window.onload = setTimeout(openPopUp, 10000);
</script>

我想也许我可以用 <script> 加载弹出窗口代码会很有帮助，因为我真的不喜欢弹出窗口加载了 body 标签:<body onload="popup('popUpDiv')">但是，我无法做到这一点，因为在我尝试使用该功能加载弹出窗口后不会加载它。也许我做错了，但我已经尝试了所有我能想到的，以及几乎所有我在网上找到的东西。

我知道除了弹出窗口之外我还有很多其他错误，我仍在努力。

很抱歉，我没有很具体地复制整个代码，但如果没有这些代码，我认为很难弄清楚我想做什么。谢谢。

Answer 1

只需在正确的地方运行你的函数)

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-200;//200 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-200;//200 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);		
}
window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        console.log( 'ESC' );
		document.getElementById('popUpDiv').style.display = 'none';
		document.getElementById('blanket').style.display = 'none';
    }
}
function openPopUp() {
  setTimeout(function(){
    popup('popUpDiv');
  }, 5000);
}

@charset "UTF-8";
body {
	font-family:Palatino, Baskerville, Georgia, serif;
	background:#190121;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
 #container {
	width: 780px;  
	background: #FFFFFF;
	margin: 0 auto; 
	font-size:14px;
	
	text-align: left; 
}
#mainContent {
	padding: 0 60px;
	min-height:600px;
	line-height:25px
}

img {border:0px}




/*LINKS*/

#mainContent .gamortva:link {
color:#ffffff; 
text-decoration:none; 
font-size:8px; 
background:#000000; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff; 
text-decoration:none; 
font-size:8px; 
background:#000000; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff; 
text-decoration:none; 
font-size:9px; 
background:#333333; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none; 
font-size:9px; 
background:#333333; 
padding:5px; 
-webkit-border-radius:10px;
-moz-border-radius:10px
}



/*STYLES FOR CSS POPUP*/


#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
   -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
}

#popUpDiv {
	position:absolute;
	background:url(iRobot.jpg) no-repeat;
	width:400px;
	height:400px;
	border:5px solid #000;
	z-index: 9002;
}



.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none; 
font-size:40px; 
background:#000000; 
opacity:0.8; 
-webkit-border-radius:20px;
-moz-border-radius:20px;
}

.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline; 
font-size:43px; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}

.amazonis-knopka:visited{
color:white;
}

#mainContent .gamortva:active {
color:#ffffff;
}

.popTitle {
	display: block;
	margin-top: 10px;
	text-align: center;
	background:#333333; 
	padding:19px; 
	-webkit-border-radius:100px;
	-moz-border-radius:10px;
	background: rgba(0, 0, 0, 0.5);
	display: block;
	color:white;
	font-size:23px; 
}

.popText {
	display: block;
	margin-top: 40px;
	text-align: center;
	padding:30px; 
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	background: rgba(144, 154, 56, 0.3);
	font-size:25px; 
	font-weight: bolder;
   -webkit-text-fill-color: red;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>

</head>
<body onload="openPopUp()">
<div id="container">


  <div id="mainContent">
  
  
  
  
<p>Roomba iRobot <strong>Pop Up</strong> Beta <em>V1</em></p>

    
    <div id="blanket" style="display:none;"></div>
	<div id="popUpDiv" style="display:none;">
    	<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
		<span class="popTitle">Heading!..</span>
		
		<span class="popText">Text..</span>

			 <a href="http://stackoverflow.com/" class="amazonis-knopka">Link...</a>
	</div>
  <a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
    
    

    
    
    
    
		</div>
	</div>



</body>
</html>