BOSS需要一個首頁彈出廣告的特效，於是webhao在粽子節前夕，熬夜做出一個手機端廣告彈出特效，點選tochch me小手，出現一個帶有白色幕布和廣告圖片的背景，再次點選螢幕效果消失，首頁恢復正常。

jQuery程式碼：

<script>
	$(function(){
		//可視視窗的寬度,高度
		var width=$(window).width();
		var height=$(window).height();
		//文件寬度，高度
		var dWidth=$(document).width();
		var dHeight=$(document).height();
		//幕布遮住所有內容
		$(".screen").css("height",dHeight);
		$(".screen").css("width",dWidth);
		
		//顯示圖片的寬高為整個螢幕
		$("#pic").css("height",height);
		$("#pic").css("width",width);
		
		//側邊欄按鈕的寬度
		var block=$("#touchme").css("width");
		left=parseInt(width)-parseInt(block)-10;
		//使側邊欄按鈕居於最右邊
		$("#touchme").css("left",left);
		
		/*禁止滾動*/
		var a=function(e){
			e.preventDefault();
			e.stopPropagation();
		}
		//點選touchme,新增禁止滾動事件a
		$("#touchme").click(function(){
			document.addEventListener("touchmove",a,false);
			$(".container").css("display","block");
		})
		//點選白色背景，移除事件a
		$(".container").click(function(){
			if(document.removeEventListener){
				document.removeEventListener("touchmove",a,false);
			}else{
				document.detachEvent("touchmove",a);
			}
			$(".container").css("display","none");
		})
	})
</script>
 

CSS程式碼：

<style type="text/css">
	#touchme{
		background: url("img/hi.png") no-repeat;
		width:35px;
		height:35px;
		position:fixed;
		top:50%;
		left:0px;
		z-index:97;
	}
	/*彈窗效果*/
	.container{
		display:none;
	}
	.screen {
	    background: #fff none repeat scroll 0 0;
	    display: block;
	    left: 0;
	    opacity: 0.8;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    height:100%;
	    z-index: 98;
	}
	#pic {
	 	background: rgba(0, 0, 0, 0) url("img/indexshow.png") no-repeat scroll center center / 200px auto;
	    display: block;
		height: 500px;
		/*margin: 45px 0 0 10px;*/
		position: fixed;
	    z-index: 99;
	}
</style>
 

<div class="container" >
			<div class="screen">
				<div id="pic"></div>
			</div>	
</div>
<div id="touchme"></div>

期間也遇到一些問題，比如我想獲取滾動條到頂部的高度，於是在手機端使用jQuery的scrolltop會失效，這個由於時間問題也沒有深究，具體解決方案未知，若開發手機使用移動端框架應該不會存在這個問題。還有，

background: rgba(0, 0, 0, 0) url("img/indexshow.png") no-repeat scroll center center / 200px auto;
 

center center指圖片位於螢幕正中心， / 後面的200px auto指的是圖片的寬、高，屬於css的新屬性。至於為什麼要用auto代替高度呢？因為設定具體的高度，圖片會變得異常模糊。所以我們在為背景圖片設定寬高的時候，儘量只控制寬，讓高度auto.