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

约定不等于承诺〃 2021-09-18 22:42 474阅读 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>

![20190413141338306.gif][]

# 还可以给弹窗添加动画，比如在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>

![20190413143152519.gif][]

![20190413144049171.gif][]

# 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>

![20190413144855176.gif][]

[20190413141338306.gif]: /images/20210725/c93b152138df48b2a35a64a3d5960abe.png
[20190413143152519.gif]: /images/20210725/feeea07af470448a896ba038322862d5.png
[20190413144049171.gif]: /images/20210725/448fd0c83897495dada0843c1e87b69c.png
[20190413144855176.gif]: /images/20210725/be499be5ee9c447a8d6844ed2f6761cb.png