0
所以我一直在嘗試這幾個小時，因爲我沒有豐富的JavaScript經驗。基本上，我修改了一個CSS和HTML代碼用於彈出窗口，我在網上找到了。不過，我很想讓彈出窗口在頁面加載10秒後顯示出來。我嘗試了很多方法，但沒有一個給我想要的結果。其實，他們都沒有工作，甚至是部分工作。 這裏是最新的方法，這也沒有奏效。怎麼能彈出加載頁面加載後012秒
function toggle(div_id) {
\t var el = document.getElementById(div_id);
\t if (el.style.display == 'none') { \t el.style.display = 'block';}
\t else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
\t if (typeof window.innerWidth != 'undefined') {
\t \t viewportheight = window.innerHeight;
\t } else {
\t \t viewportheight = document.documentElement.clientHeight;
\t }
\t if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
\t \t blanket_height = viewportheight;
\t } else {
\t \t if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
\t \t \t blanket_height = document.body.parentNode.clientHeight;
\t \t } else {
\t \t \t blanket_height = document.body.parentNode.scrollHeight;
\t \t }
\t }
\t var blanket = document.getElementById('blanket');
\t blanket.style.height = blanket_height + 'px';
\t var popUpDiv = document.getElementById(popUpDivVar);
\t popUpDiv_height=blanket_height/2-200;//200 is half popup's height
\t popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
\t if (typeof window.innerWidth != 'undefined') {
\t \t viewportwidth = window.innerHeight;
\t } else {
\t \t viewportwidth = document.documentElement.clientHeight;
\t }
\t if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
\t \t window_width = viewportwidth;
\t } else {
\t \t if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
\t \t \t window_width = document.body.parentNode.clientWidth;
\t \t } else {
\t \t \t window_width = document.body.parentNode.scrollWidth;
\t \t }
\t }
\t var popUpDiv = document.getElementById(popUpDivVar);
\t window_width=window_width/2-200;//200 is half popup's width
\t popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
\t blanket_size(windowname);
\t window_pos(windowname);
\t toggle('blanket');
\t toggle(windowname); \t \t
}
window.onkeydown = function(event) {
if (event.keyCode == 27) {
console.log('ESC');
\t \t document.getElementById('popUpDiv').style.display = 'none';
\t \t document.getElementById('blanket').style.display = 'none';
}
}@charset "UTF-8";
body {
\t font-family:Palatino, Baskerville, Georgia, serif;
\t background:#190121;
\t margin: 0;
\t padding: 0;
\t text-align: center;
\t color: #000000;
}
#container {
\t width: 780px;
\t background: #FFFFFF;
\t margin: 0 auto;
\t font-size:14px;
\t
\t text-align: left;
}
#mainContent {
\t padding: 0 60px;
\t min-height:600px;
\t 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 {
\t position:absolute;
\t background:url(***.jpg) no-repeat;
\t width:400px;
\t height:400px;
\t border:5px solid #000;
\t 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 {
\t display: block;
\t margin-top: 10px;
\t text-align: center;
\t background:#333333;
\t padding:19px;
\t -webkit-border-radius:100px;
\t -moz-border-radius:10px;
\t background: rgba(0, 0, 0, 0.5);
\t display: block;
\t color:white;
\t font-size:23px;
}
.popText {
\t display: block;
\t margin-top: 40px;
\t text-align: center;
\t padding:30px;
\t -webkit-border-radius:20px;
\t -moz-border-radius:20px;
\t background: rgba(144, 154, 56, 0.3);
\t font-size:25px;
\t 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>
\t <div id="popUpDiv" style="display:none;">
\t <a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
\t \t <span class="popTitle">Heading!..</span>
\t \t
\t \t <span class="popText">Text..</span>
\t \t \t <a href="http://stackoverflow.com/" class="amazonis-knopka">Link...</a>
\t </div>
<a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
\t \t </div>
\t </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')"> 但是，我無法做到這一點，因爲彈出後不加載，我嘗試加載它與t他的功能。也許我做錯了，但我已經嘗試了所有我能想到的，以及我在網上找到的幾乎所有東西。
我知道除了彈出窗口之外，我還有很多其他的錯誤，我仍然在努力。
對不起，不是非常具體和複製整個代碼，但沒有那些我認爲這將很難找出我想要做的。 謝謝。
恰好作品我想它做的方式！感謝您提供這樣一個簡單而實用的答案。 –
所以你認爲
不是不好的方法嗎？我的意思是從body標籤運行彈出功能。 –爲什麼不呢？如果你不想使用jQuery並且它是'$（document）.ready（）'，你可以使用這個解決方案：[link]（https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to -jquerys-ready-how-to-call-a-function-when-the） –