 
var overlayObj=$("#overlay").overlay({api:true}); 
        overlayObj.load();//自動顯示overlay,（無需觸發(fā)，會在頁面加載完成時自動觸發(fā)） 
        setTimeout(function(){overlayObj.close();},2000);//2秒后，自動加載（出現(xiàn)）的提示框隱藏 
        $("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判斷此時是否有overlay提示框是否顯示 
        $("#overlayInfo").append("<p>overlay background image:"+overlayObj.getBackgroundImage()+"</p>"); 
        $("#overlayInfo").append("<p>overlay trigger:"+overlayObj.getTrigger()+"</p>"); 
        $("#overlayInfo").append("<p>overlay config-speed:"+overlayObj.getConf().speed+"</p>"); 
        $("#overlayInfo").append("<p>overlay content:"+overlayObj.getContent().html()+"</p>"); 

        overlayObj.onBeforeLoad=function(){ 
            alert(this.getContent().attr("id")); 
        } 

以下是overlay對象的方法說明描述：

方法	默認值	描述
load()	Overlay	打開overlay提示框的另一個方法，通過該方法可以不通過頁面事件觸發(fā)而直接通過js腳本打開overlay提示框。
close()	Overlay	（通過js腳本對該方法的調(diào)用）關(guān)閉彈出的overlay提示框。
isOpened()	boolean	判斷當前是否有overlay提示框被打開。如果當前有overlay提示框已被打開，返回true。
getBackgroundImage()	jQuery	將當前overlay提示框的背景圖片作為一個jquery對象返回。
getContent()	jQuery	將overlay彈出框的內(nèi)容以jquery對象的方式返回。
getTrigger()	jQuery	將觸發(fā)overlay彈出框的元素以jquery對象的方式返回。
getConf()	Object	獲取overlay彈出框初始化時的配置對象。
api	FALSE	同配置對象中api。

onBeforeLoad(fn)	API	同配置文件中onBeforeLoad屬性。
onLoad(fn)	API	同配置文件中onLoad屬性。
onBeforeClose(fn)	API	同配置文件中onBeforeClose屬性。
onClose(fn)	API	同配置文件中onClose屬性。

最后，給出完整示例代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" ></script> 
<style><!-- 
body { 
    padding:150px 50px; 
    font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana; 
} 

#overlayInfo p{ 
    color:red; 
} 
--></style><style >body { 
    padding:150px 50px; 
    font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana; 
} 

#overlayInfo p{ 
    color:red; 
}</style> 
<link rel="stylesheet" type="text/css"  /> 
<script type="text/javascript"><!-- 
$(function() { 

    $("button[rel]").overlay({ 
        start:{ 
            width: 300, 
            absolute: false     
        }, 
        finish:{ 
            top:10, 
            left:400, 
            absolute:false 
        }, 
        speed:3000, 
        fadeInSpeed:3000, 
     closeOnClick: false, 
    oneInstance:false, 
    close:'#overlayClose',//自定義關(guān)閉按鈕 
        //expose: '#BAD0DB'//方式一：只以簡單的背景色字符串方式設(shè)置 
        expose: {//方式二：以expose功能配置項方式設(shè)置 
            color: '#BAD0DB', 
            opacity: 0.7, 
            closeSpeed: 1000 
        }, 
        onBeforeLoad:function(){ 
            //alert(this.getTrigger().attr("rel")+":onBeforeLoad");//顯示該overlay提示框的觸發(fā)器rel屬性值 
        }, 
        onLoad:function(){ 
            //alert(this.getTrigger().attr("rel")+":onLoad"); 
        }, 
        onBeforeClose:function(){ 
            alert(this.getTrigger().attr("rel")+":onBeforeClose"); 
            return false; 
        } 
        }); 

        var overlayObj=$("#overlay").overlay({api:true}); 
        overlayObj.load();//自動顯示overlay,（無需觸發(fā)，會在頁面加載完成時自動觸發(fā)） 
        setTimeout(function(){overlayObj.close();},2000);//2秒后，自動加載（出現(xiàn)）的提示框隱藏 
        $("#overlayInfo").append("<P>overlay is opened:"+overlayObj.isOpened()+"</p>");//判斷此時是否有overlay提示框是否顯示 
        $("#overlayInfo").append("<p>overlay background image:"+overlayObj.getBackgroundImage()+"</p>"); 
        $("#overlayInfo").append("<p>overlay trigger:"+overlayObj.getTrigger()+"</p>"); 
        $("#overlayInfo").append("<p>overlay config-speed:"+overlayObj.getConf().speed+"</p>"); 
        $("#overlayInfo").append("<p>overlay content:"+overlayObj.getContent().html()+"</p>"); 

        overlayObj.onBeforeLoad=function(){ 
            alert(this.getContent().attr("id")); 
        } 
}); 
// --></script> 
<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> 
<div id="overlayInfo"></div> 