如scrollable的學(xué)習(xí)，首先給出操作的html目標代碼：
代碼如下:
<button rel="#overlay">Open overlay</button>
<button rel="#overlay2">Other overlay</button>
<div class="overlay" id="overlay">
<h2 style="margin:10px 0" >Here is my overlay</h2>
<p style="float: left; margin:0px 20px 0 0;">
<span>$$$$$$$$$$</span>
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay" id="overlay2">
<h2 style="margin:10px 0" >Here is my another overlay</h2>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
<div>
<button id="overlayClose">close</button>
</div>
</div>
該功能是通過jqueryObject.overlay()方法來實現(xiàn)的，其中overlay方法提供以下兩種方式：
1. $("button[rel]").overlay()//該方法能采用默認方法顯示提示overlay
2. $("button[rel]").overlay({config object}) //該方法通過配置對象將來定制overlay的顯示。
以下代碼為第二種方式的配置參數(shù)實現(xiàn)（只需將該實現(xiàn)放于jquery的ready方法中即可）：
代碼如下:
$("#overlay").overlay({api:true}).load();//自動顯示overlay,（無需觸發(fā)，會在頁面加載完成時自動觸發(fā)）
$("button[rel]").overlay({
start:{
width: 300,
absolute: false
},
finish:{
top:10,
left:400,
absolute:false
},
