PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

jquery万能弹出层插件popup_layer.js

jquery万能弹出层插件popup_layer.js

来源:phperz.com  作者:phperz.com  发布时间:2011-07-23
示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。 new PopupLayer({trigger:#ele1,popupBlk:#blk1,closeBtn:#close1}); 示例2:参数offsets可设置弹出层位置偏移量,让弹出层的位置随心所欲 new PopupLayer({trigger:#

示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。
new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});

示例2:参数offsets可设置弹出层位置偏移量,让弹出层的位置随心所欲
new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});

示例3:useFx设置为true即可使用弹出层默认特效
new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});

示例4:使用弹出层特效,重载特效函数来完成自定义特效
var t4 = new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});
t4.doEffects = function(way){
     way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
}

示例5:在弹出层容器上加上自定义的class
new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});

示例6:useOverlay设置为true即可在弹出层后使用遮罩
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});

示例7:eventType为事件触发类型,表示以何种方式触发弹出层
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});

示例8:自定义事件,onBeforeStart在触发弹出前做一些自己想做的事。
这里我做的事是:在dom加载完成后,延迟5秒才能使用弹出层。(提示:可refresh页面看效果)
new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",
     onBeforeStart:function(){
         this.isDoPopup = false;
         setTimeout(function(){this.isDoPopup = true}.binding(this),5000);
     }
});

示例9:综合效果
var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",
useOverlay:true,useFx:true,offsets:{x:0,y:-41}});
t9.doEffects = function(way){
    if(way == "open"){
        this.popupLayer.css({opacity:0.3}).show(400,function(){
            this.popupLayer.animate({
                left:($(document).width() - this.popupLayer.width())/2,
                top:(document.documentElement.clientHeight -
                    this.popupLayer.height())/2 + $(document).scrollTop(),
                opacity:0.8
            },1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
        }.binding(this));
    }
    else{
        this.popupLayer.animate({
            left:this.trigger.offset().left,
            top:this.trigger.offset().top,
            opacity:0.1
        },{duration:500,complete:function(){
            this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
    }
}

效果图

 

popup_layer.js下载www.phperz.com/upimg/soft/fujian/1_110723222505.rar


延伸阅读:
3K大小的万能JQuery弹出层类库
一个3k大小的万能jquery弹出层类
10个jQuery弹出层插件推荐
Jquery(popup_layer.js)弹出层效果
jQuery Plugin for Popup对话框插件
jQuery通用dialog/popup窗口插件
jQuery弹出层插件bPopup介绍
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号