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

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

转载作者：行者123 更新时间：2023-11-28 03:01:17

由于我在 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')">但是，我无法做到这一点，因为在我尝试使用该功能加载弹出窗口后不会加载它。也许我做错了，但我已经尝试了所有我能想到的，以及几乎所有我在网上找到的东西。

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

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

最佳答案

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

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>

关于javascript - 如何在页面加载后弹出加载秒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46187022/

文章推荐： javascript - 制作 Canvas 镜像、缩放和旋转

文章推荐： javascript - 在 div 游戏中弹跳 img

文章推荐： javascript - 删除后输入仍然存在

javascript - 在父选项卡(页面)上显示叠加层，直到打开其所有子选项卡(页面)
假设我有父页面。当我单击“打印”时，会打开一个新选项卡(页面)以进行打印预览。我想要的是，当我单击“打印”时，父选项卡(页面)上应显示覆盖层，以停止进一步的工作，直到子选项卡关闭。 Because
javascript - 如何从 HTTPS 页面 POST 数据到 HTTP 页面
我知道这是不可能的，但我想我还是会问这个问题。我有一个 HTTPS 页面，并且正在动态创建一个表单。我想将表单发布到 HTTP 页面。在浏览器不弹出警告的情况下这可能吗？当我在 IE8 上执行此操作
javascript - 将 .aspx 页面 html 渲染/调用到另一个 .aspx 页面
在我的应用程序中，我实现了ajax 4.0客户端模板目前我的模板位于同一个.aspx页面上。 (例如 Main.aspx) 但我想将它们外部化。(即所有 HTML 都会放在另一个页面上) 为此，我使
javascript - 锁定/卡住导航栏/整个 html 页面，直到加载其他 html 页面
我目前正在构建自己的网络应用程序。在此应用程序的标题中有一个导航栏。我将相同的导航栏添加到我的所有 html 页面，以便在页面之间导航时保持可见，并将导航元素设置为事件到我现在所在的页面。我的
iis-7 - Windows 身份验证不适用于经典 ASP 页面(但适用于同一站点中的 ASP.Net 页面)
我们有一个在集成管道下运行的 IIS7 Intranet 站点，该管道主要是 ASP.Net，带有一些传统的经典 ASP 页面。该站点允许匿名访问大多数区域，但使用 Windows 身份验证来保护某些
c# - 如何将长 HTML 文件拆分为单独的相互链接的页面，例如页面 1、页面 2、页面 3
有一个要求，我需要根据 div 标签的高度超过 700 像素的条件将大型 HTML 页面拆分为多个页面。我还可以根据字数拆分页面。下面的示例根据 HTML 标签分割页面，而我需要根据 div 高度
html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面
有两个 html 页面，如果在第一个页面中单击特定图像，它将转到第二个 html 页面。如果在第二个 html 页面上的任何地方单击它应该返回到第一页并将第二页完全显示在第一页的一个 div 中 1s
haskell - Servant 中的 Html 页面——如何结合 REST API 和静态 html 页面？
我有一个简单的 hello world Servant 应用程序。我需要向它添加一些静态或动态的 html 页面。我怎样才能做到这一点？在文档中没有提到它。注意我不想在 Haskell 代码中创建 h
javascript - jQuery 将外部 html 页面 <title> 插入另一个 html 页面
我有两个文件 index.html 和 index2.html。这两个文件都在本地机器上的同一目录中(无法访问 PHP 等)。我正在努力 Page Title 使用 jQuery 从 index.h
java - 为一个 Servlet 创建一个动态前端 JSP 页面，同时将 Servlet 的输出显示到 JSP 页面
假设我有一个 JSP 页面 index.jsp User id:
javascript - 页面 A 将值发布到页面 B，页面 B 使用 cURL 向页面 C 发送另一个帖子，并将响应返回到页面 A
我面临着一个对我来说非常陌生的情况。我会尽力让事情变得简单来解释它一步一步来。 1)在页面 A(用户表单)中，我从字段中获取一些值并将其作为 jQuery AJAX POST 发送到页面 B。这是主要
javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列
我正在尝试弄清楚如何从 buttons.html 获取用户按钮点击动态切换第二个列的可见性 userinput.html 。我正在使用 DataTables userinput.html表并认为我有
asp.net-mvc - angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面
我有asp。净 mvc4 项目。 Angularjs 已集成。我已经按照以前的要求构建了 HTML 页面和 WEB API 2。现在出于某种原因，我必须使用 CSHTML 页面。以前我只有 web
WordPress 页面 - 未找到页面
我的网站包含大约 18 个不同的页面。以管理员身份登录后，我单击“页面”。我看到了以下内容 All (20) | Mine (19) | Published (19) | Draft (1) No
Haskell "man"页面？
Haskell 中每个函数都有手册页吗？换句话说，我可以在某处输入 man fst 并获取有关该函数的手册或帮助页面吗？我发现大量的功能势不可挡! 我正在使用 GHC 和 GHCi。最佳答案我不知
Github 页面 - 禁用除单个站点之外的所有站点的自定义域重定向？
我一直在用github pages很长一段时间以来，并使用自定义域重定向功能来重定向我的 user website来自 prahladyeri.github.io到我自己的域名 https://www
显示旧代码的 Github 页面
我对 Github 有一个基本的了解:我知道如何创建、添加、提交、推送和克隆存储库。我也开始探索 Github 页面来托管我的项目。我的最新项目于 3 月开始并将其推送到 gh-page。从那以后，我
Airflow Ooops 页面
在尝试查看日志时，Airflow 会抛出一个带有以下消息的 oops 页面: File "/Users/user/.pyenv/versions/3.5.2/lib/python3.5/locale.
GitHub 页面 - 网址重写支持
我已经按照此处列出的步骤 (https://pages.github.com/) 为我正在处理的网站设置了一个 GitHub 页面我设置的站点当前托管在 IIS 下，并使用 URL Rewrite
将域重定向到 Openshift 页面
我想将我的 domain.com 重定向到 openshift 页面 (openshift-app.rhcloud.com)。我已经按照描述完成了 here它有效。唯一的问题是，在任何网站上，我都不会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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