页面加载后如何弹出弹出窗口加载秒

Question

So I have been trying this for hours since I have no huge experience in JavaScript. Basically, I have modified a CSS and HTML codes for the pop up, that I found on the web. However, I would love to make the pop up to show up 10 seconds after a page load. I have tried lots of methods, but none of them gave me the result I wanted. Actually, none of them worked, even partially. Here is the latest method, which also didn't work.

 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> 

The setTimeout code is the following:

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

I thought maybe if I could load the pop up with the <script> code it would be very helpful, because I don't really like that the pop up is being loaded with the body tag: <body onload="popup('popUpDiv')"> But, I could not manage to do that, because the pop up does not load after I try to load it with the function. Maybe I was doing it wrong, but I have tried everything I could think of, and almost everything I found on web.

I know I have a lot of other mistakes other than the pop up, I am still working on them.

Sorry for not being very specific and copying entire codes, but without those I thought it would be hard to figure out what I was trying to do. Thank you.

Answer 1

Just run your function in right place )

 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>