Jquery（popup_layer.js）弹出层效果

超强的弹出层特效，简便，方便，最重要的是在 IE6下能遮住下拉框

<script language="javascript">
   $(document).ready(function() {
    //示例1，默认弹出层
    new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});
    //示例2，弹出层位置可偏移
    new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",
     offsets:{
      x:102,
      y:-41
     }
    });
    //示例3，使用弹出层默认特效
    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,然后在css定义即可
    new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});

    //示例6，使用遮罩
    new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});
    //示例7，使用不同的事件来触发
    new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});
    //示例8，使用自定义事件
    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)});
     }
    }
   });
</script>

 

延伸阅读:
3K大小的万能JQuery弹出层类库
一个3k大小的万能jquery弹出层类
10个jQuery弹出层插件推荐