手机直播页面底部购物车弹窗提示特效

页面的head部分，需引入两个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="themes/css/base.css">
<link type="text/css" rel="stylesheet" href="themes/css/home.css">

页面的body部分，设置好footer标签里的弹窗内容，代码如下：

<footer class="flex-box">
	<div class="flex-variable"></div>
	<div class="pop-content">
		<!-- nav begin -->
		<div class="pop-content-car">
			<a id="Info">消息</a>
		</div>
		<div id="btn-pop" class="pop-content-car">
			<a  href="#">购物车</a>
		</div>
		<!-- nav end -->
		<!-- pop begin -->
		<div id="popup">
			<div class="triangle"></div>
			<!-- begin-->
			<div class="firstBox">
				<div class="contentBox pop-list">
					<ul>
						<li>
							<div class="pop-title">
								<div class="pop-img"><img src="themes/img/pd.png" alt=""></div>
								<p>蔡府燕窝心燕盏印尼进口白燕盏干燕窝孕妇燕窝盏正品溯源一盏一码8克</p>
								<div class="pop-buy">
									<span>￥<em>320</em></span>
									<a href="#" target="_blank">购买</a>
								</div>
							</div>
							<div class="pop-line"></div>
							<div class="pop-title">
								<div class="pop-img"><img src="themes/img/pd.png" alt=""></div>
								<p>蔡府燕窝心燕盏印尼进口白燕盏干燕窝孕妇燕窝盏正品溯源一盏一码8克</p>
								<div class="pop-buy">
									<span>￥<em>320</em></span>
									<a href="#" target="_blank">购买</a>
								</div>
							</div>
						</li>
						<li>
							<div class="pop-title">
								<div class="pop-img"><img src="themes/img/pd.png" alt=""></div>
								<p>蔡府燕窝心燕盏印尼进口白燕盏干燕窝孕妇燕窝盏正品溯源一盏一码8克</p>
								<div class="pop-buy">
									<span>￥<em>320</em></span>
									<a href="#" target="_blank">购买</a>
								</div>
							</div>
							<div class="pop-line"></div>
							<div class="pop-title">
								<div class="pop-img"><img src="themes/img/pd.png" alt=""></div>
								<p>蔡府燕窝心燕盏印尼进口白燕盏干燕窝孕妇燕窝盏正品溯源一盏一码8克</p>
								<div class="pop-buy">
									<span>￥<em>320</em></span>
									<a href="#" target="_blank">购买</a>
								</div>
							</div>
						</li>
						<li>
							<div class="pop-title">
								<div class="pop-img"><img src="themes/img/pd.png" alt=""></div>
								<p>蔡府燕窝心燕盏印尼进口白燕盏干燕窝孕妇燕窝盏正品溯源一盏一码8克</p>
								<div class="pop-buy">
									<span>￥<em>320</em></span>
									<a href="#" target="_blank">购买</a>
								</div>
							</div>
							<div class="pop-line"></div>
							<div class="pop-title">
								<div class="pop-img"><img src="themes/img/pd.png" alt=""></div>
								<p>蔡府燕窝心燕盏印尼进口白燕盏干燕窝孕妇燕窝盏正品溯源一盏一码8克</p>
								<div class="pop-buy">
									<span>￥<em>320</em></span>
									<a href="#" target="_blank">购买</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="menuBox">
					<ul>
						<li class="liactive"></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="mask_shadow"></div>
		<!-- pop end -->
	</div>
</footer>

页面的底部，需引入jQuery库和两个必要的JS文件，并设置好弹窗事件的响应，代码如下：

<script type="text/javascript" src="themes/js/jquery.min.js"></script>
<script type="text/javascript" src="themes/js/flexible.js"></script>
<script type="text/javascript" src="themes/js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#btn-pop").click(function(){
        $("#popup").toggle( );
    });
});
</script>