基于jQuery弹出层的9种效果

最新推荐文章于 2024-08-06 10:37:21 发布

IT菇凉

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量1.8k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u013214705/article/details/47394085

版权

本文通过9个示例详细介绍了如何使用jQuery创建各种弹出层效果，包括位置偏移、自定义特效、遮罩层、事件触发类型以及自定义事件等功能。示例涵盖了从基础到高级的多种应用场景。

摘要由CSDN通过智能技术生成

示例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：useOve