jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能，今天鸥哥讲讲这个功能要怎么做。

涉及到的知识点

jQuery、html、css相关知识。本教程展示包括jQuery、html、css在内的全部源码，可复制下来直接使用。
 

html源码

html源码是涉及到的元素，包括logo展示、关注按钮、二维码路径、关闭按钮，等等。

<div class="footer-fixed">
	<img src="/images/logo.png" alt="关注我们">
	<span class="words">关注我们</span>
	<span class="guanzhu">关注</span>
</div>

<div class="public-container">
	<div class="public-img">
		<img src="/images/public.jpg" alt="关注公众号">
		<span class="public-close">关闭</span>
	</div>
</div>

 

css源码

css源码决定了点击关注、弹出二维码、关闭按钮等元素的外观。此外，pc端不显示弹出与关注功能，仅在手机端展示

<style>
.footer-fixed{
	display:none
}
@media screen and (max-width:960px){
	.footer-fixed{
		display:block;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		background:#fff;
		line-height:60px;
		overflow: hidden;
		padding:14px 0;
	}
	.footer-fixed span.words{
		line-height:30px;
		float: left;
		color:#333;
		margin:0 0 0 10px;
	}
	.footer-fixed img{
		height:30px;
		float: left;
		margin:0 0 0 10px;
	}
	.footer-fixed .guanzhu{
		float: right;
		background:#e63d14;
		color:#fff;
		padding:0 20px;
		margin:0 10px 0 0;
		line-height:30px
	}
	.public-container{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:rgba(0,0,0,.7);
		display: none;
	}
	.public-container .public-img{
		max-width:80%;
		margin:20% auto;
		background:#fff;
		padding:0 0 20px 0;
		text-align: center;
	}
	.public-container img{
		max-width:100%;
		display:block;
	}
	.public-close{
		color:green;
		padding:10px;
	}
}
</style>

 

jQuery源码

jQuery源码控制点击事件、弹出事件、关闭事件等一系列涉及到交互的事件。

<script src="/js/jquery.min.js"></script>
<script>
$(function(){
	$('.guanzhu').click(function(){
		$(".public-container").show();
	})
	$('.public-close').click(function(){
		$(".public-container").hide();
	})
})
</script>

 

需要注意的点

需要注意，图片、js路径要全部换成可引用的路径，否则会出错。