jQuery实现广告弹窗显示和隐藏（show（），hide（）），弹窗动画

最新推荐文章于 2023-10-03 17:03:53 发布

疆~

最新推荐文章于 2023-10-03 17:03:53 发布

阅读量1.9k

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/qq_40323256/article/details/89281866

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

功能：2s后打开广告弹窗，再过3s后自动关闭弹窗。在弹窗显示期间，也可手动点击关闭按钮关闭弹窗

还可以给弹窗添加动画，比如在show(),hide()方法中设置参数：slow，fast，1000（表示1000ms）

toggle（）：相当于开关。

功能：2s后打开广告弹窗，再过3s后自动关闭弹窗。在弹窗显示期间，也可手动点击关闭按钮关闭弹窗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现广告弹窗</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			#ad{
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
				bottom: 0;
				right: 0;
				position: fixed;
				display: none;
			}
		</style>
		<script type="text/javascript">
			setTimeout(function(){
			   $("#ad").show()
			},2000)
			setTimeout(function(){
				$("#ad").hide()
			},5000)
			$(function(){
				$("#closeBtn").click(function(){
					$("#ad").hide();
				})
			})
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">关闭</button>
		</div>
	</body>
</html>

还可以给弹窗添加动画，比如在show(),hide()方法中设置参数：slow，fast，1000（表示1000ms）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现广告弹窗</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			#ad{
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
				bottom: 0;
				right: 0;
				position: fixed;
				display: none;
			}
		</style>
		<script type="text/javascript">
			setTimeout(function(){
			   $("#ad").show("fast")
			},2000)
			setTimeout(function(){
				$("#ad").hide("slow",function(){
					alert("广告关闭了")
				})
			},5000)
			$(function(){
				$("#closeBtn").click(function(){
					$("#ad").hide(2000);
				})
			})
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">关闭</button>
		</div>
	</body>
</html>

toggle（）：相当于开关。

可以自动判断弹窗是否显示了。如果弹窗是显示状态，则执行关闭功能，如果弹窗是关闭状态，则执行显示功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现广告弹窗</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			#ad{
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
				bottom: 0;
				right: 0;
				position: fixed;
				display: none;
			}
		</style>
		<script type="text/javascript">
			setTimeout(function(){
			   $("#ad").toggle("slow");
			},2000)
			
			$(function(){
				$("#closeBtn").click(function(){
					$("#ad").toggle(function(){
							alert("弹窗关闭了");
					});
				})
			})
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">关闭</button>
		</div>
	</body>
</html>

疆~

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现广告弹窗显示和隐藏（show（），hide（）），弹窗动画

目录功能：2s后打开广告弹窗，再过3s后自动关闭弹窗。在弹窗显示期间，也可手动点击关闭按钮关闭弹窗还可以给弹窗添加动画，比如在show(),hide()方法中设置参数：slow，fast，1000（表示1000ms）toggle（）：相当于开关。功能：2s后打开广告弹窗，再过3s后自动关闭弹窗。在弹窗显示期间，也可手动点击关闭按钮关闭弹窗<!DOCTYPE h...
复制链接

扫一扫

专栏目录