jquery tools系列 overlay 学习第1/2页

<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>

    $("#overlay").overlay({api:true}).load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
    $("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',//自定义关闭按钮
        //expose: '#BAD0DB'//方式一：只以简单的背景色字符串方式设置
        expose: {//方式二：以expose功能配置项方式设置
            color: '#BAD0DB',
            opacity: 0.7,
            closeSpeed: 1000
        },
        onBeforeLoad:function(){
            //alert(this.getTrigger().attr("rel")+":onBeforeLoad");//显示该overlay提示框的触发器rel属性值
        },
        onLoad:function(){
            //alert(this.getTrigger().attr("rel")+":onLoad");
        },
        onBeforeClose:function(){
            alert(this.getTrigger().attr("rel")+":onBeforeClose");
            return false;
        }
        });