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

涉及到的知识点

html源码

<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源码

<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源码

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

需要注意的点