首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:14:06
字体:
来源:转载
供稿:网友
如scrollable的学习,首先给出操作的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()方法来实现的,其中overlay方法提供以下两种方式:
1. $("button[rel]").overlay()//该方法能采用默认方法显示提示overlay
2. $("button[rel]").overlay({config object}) //该方法通过配置对象将来定制overlay的显示。
以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):
代码如下:
    $("#overlay").overlay({api:true}).load();//自动显示overlay,(无需触发,会在页面加载完成时自动触发)
    $("button[rel]").overlay({
        start:{
            width: 300,
            absolute: false    
        },
        finish:{
            top:10,
            left:400,
            absolute:false
        },
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选