jQuery点击弹出商品已售罄提示框代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery点击弹出商品已售罄提示框代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery点击弹出商品已售罄提示框代码</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	$(".but").click(function(){
		$("#faqbg").css({display:"block",height:$(document).height()});
		var yscroll =document.documentElement.scrollTop;
		$("#faqdiv").css("top","100px");
		$("#faqdiv").css("display","block");
		document.documentElement.scrollTop=0;
	});
	$(".close").click(function(){
		$("#faqbg").css("display","none");
		$("#faqdiv").css("display","none");
	});
})
</script>

<style type="text/css">
body{font-family:"宋体";font-size:12px;margin:0;padding:0;}
h1,h2,h3,h4,p,ul,li,dl,dt,dd{margin:0;padding:0;}
input,img{border:0;}
li{list-style:none;}
a{color:#666;text-decoration:none;}
a:hover{text-decoration:underline;}

.but{width:200px;height:50px;font-size:16px;font-weight:bold;color:#FFF;line-height:50px;background:#F00;}
input.but{cursor:pointer;}

#faqbg{background-color:#666666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:1000px;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;}
#faqdiv{position:absolute;width:560px;height:370px;left:50%;top:50%;margin-left:-200px;z-index:100;background-color:#fff;border:3px #ba110e solid;}
#faqdiv h2{font-size:18px;color:#ff0000;padding:33px 0 0 78px;height:53px;background:url(images/sorry.jpg) left bottom no-repeat;}
#faqdiv h2 a{position:absolute;top:5px;right:5px;}
#faqdiv h3{font-size:14px;color:#000;line-height:30px;padding:0 0 10px 15px;}

.other_list{float:left;width:536px;padding:0 12px;padding-bottom:10px;}
.other_list li{float:left;width:135px;height:225px;padding:0 8px;}
.other_list li.and{width:23px;}
.other_list li.and img{float:left;width:23px;height:22px;padding-top:53px;border:0;}
.other_list li img{width:135px;height:135px;border:1px solid #ccc;}
.other_list li dl{width:135px;}
.other_list li dl dt{line-height:18px;padding:5px 3px;}
.other_list li dl dt a{color:#666;}
.other_list li dl dd{color:#e4393c;font-weight:bold;}
span.font14{font-size:14px;}
</style>

</head>

<body>

<p style="text-align:center; padding:30px 0;"><input value="点击购买" class="but" type="button"></p>

<div id="faqbg"></div>

<div id="faqdiv" style="display:none">
	<h2>对不起，您购买的商品已售罄！<a href="#" class="close"><img src="images/close.jpg" /></a></h2>
	<h3>建议您选择以下商品：</h3>
	<div class="other_list">
		<ul>
			<li>
				<a href="#"><img src="images/other_products01.jpg" title="时尚华美月饼 礼月传情 中秋月饼礼盒" /></a>
				<dl>
					<dt><a target="_blank" href="#">时尚华美月饼 礼月传情 中秋月饼礼盒</a></dt>
					<dd>￥<span class="font14">176.00</span></dd>
				</dl>
			</li>
			<li class="and"><img src="images/and.jpg" /></li>
			<li>
				<a href="#"><img src="images/other_products02.jpg" title="华美月饼礼盒 金秋送福670g广式月饼 传统糕点" /></a>
				<dl>
					<dt><a target="_blank" href="#">时尚华美月饼 礼月传情 中秋月饼 礼月传情 中秋月饼礼盒礼盒</a></dt>
					<dd>￥<span class="font14">276.00</span></dd>
				</dl>
			</li>
			<li class="and"><img src="images/and.jpg" /></li>
			<li>
				<a href="#"><img src="images/other_products03.jpg" title="中秋献礼 2013华美金丽莎欧月飘香礼盒套装600g" /></a>
				<dl>
					<dt><a target="_blank" href="#">时尚华美月饼 礼月传情 中秋月饼礼盒</a></dt>
					<dd>￥<span class="font14">99.00</span></dd>
				</dl>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)