原创jQuery弹出层插件分享

2020-05-22 15:35:22易采站长站整理

}
if(options.shake) {
s.shakeLayer(data);
}
var timeOut;
clearTimeout(timeOut);
if(options.timer > 0){
timeOut = window.setTimeout(function(){
$("#"+s.o.replaceClose + generateId).trigger("click");
}, options.timer);
}
return data;
},
createContainer : function(data, options,generateId) {
var s = this;
//如果context未定义,则是通过html拼接的方式追加的否则就是原本就存在的,关闭后需要返回原地方
var isHtmlSlice = data.context == undefined ? true : false;
var wrapperHtml = "<div class='"+s.o.wrapper+"' id='"+s.o.wrapper + generateId+"'>"
+ "<div class='"+s.o.warpperContent+"' id='"+s.o.warpperContent + generateId+"'>"
+ "<a class='"+s.o.replaceClose+"' id='"+s.o.replaceClose + generateId+"'></a>";
if(options.head){
wrapperHtml+= "<h4 class='"+s.o.warpperTitle+" "+s.o.dragableClass+"' id='"+s.o.warpperTitle + generateId+"'>";
if(options.isClose){
wrapperHtml+= "<a href='javascript:void(0);' title='关闭' class='"+s.o.warpperCloseBtn+"' id='"+s.o.warpperCloseBtn + generateId+"'>×</a>";
}
wrapperHtml+= options.title + "</h4>";
}
wrapperHtml+= "<div id='"+s.o.warpperOwnContent + generateId+"' class='"+s.o.warpperOwnContent+"'></div>"
+ "</div>"
+ "</div>";
s.container = $(wrapperHtml);
s.container.appendTo(document.body);
data.clone(true).appendTo("#"+s.o.warpperOwnContent + generateId).show().attr('id',data.attr('id') || s.o.dataId + generateId);
//div默认宽度为100%,所以建议将所有弹出的元素设置宽度,否则弹出层宽度为100%
var w = $("#"+data.attr('id')).width() || $("#"+s.o.dataId + generateId).width() || s.o.defaultWidth;
//指定了高度
var tempWidth = w;
if(options.height > 0 ) {
if(options.width > 0){
tempWidth = options.width;
if(options.width <= w){
$("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});
} else {
//如果指定的宽度大于元素本身的宽度,那么需要将元素居中
//让元素始终居中显示
var xPadding = (options.width - w) / 2 + 8;
$("#"+s.o.warpperOwnContent + generateId).css({"padding" : "4px " + xPadding + "px"});
}
}
s.container.width(tempWidth + 32);
$("#"+s.o.warpperContent + generateId).width(tempWidth + 30);
$("#"+s.o.warpperOwnContent + generateId).css({"height":options.height,"overflow-y":"auto"});