152 lines
4.6 KiB
JavaScript
152 lines
4.6 KiB
JavaScript
/**
|
|
* jQuery Popup Layer Plugin
|
|
* https://github.com/edwardnevermind/jquery.popuplayer.js
|
|
*
|
|
* @author Edward
|
|
* MIT licensed
|
|
*/
|
|
|
|
;(function($) {
|
|
|
|
var PopupLayer = function(elem, opt) {
|
|
this.$elem = $(elem);
|
|
this.$mask = $("<div class='popup-layer'></div>");
|
|
this.$content = $("<div class='popup-layer-content p-3'></div>");
|
|
this.$blurAreas = $("body > *");
|
|
|
|
this.defaults = {
|
|
content: "", // 内容可以传入，纯文本和类名
|
|
target: "body", // 把弹出层添加到的目标节点
|
|
to: "top", // 向哪个方向展开
|
|
screenRatio: 0.3, // 占屏幕百分比
|
|
heightOrWidth: 300, // 当且仅当screenRatio为0时生效
|
|
blur: false, // 是否开启毛玻璃效果
|
|
speed: 200, // 动画速度
|
|
color: "#000", // 文本颜色
|
|
backgroundColor: "#fff", // 背景颜色
|
|
contentToggle: false, // 点击content是否关闭弹出层
|
|
closeBtn: null, // 指定关闭按钮
|
|
openCallback: null, // 展开的回调
|
|
closeCallback: null // 关闭的回调
|
|
};
|
|
|
|
// 合并默认参数和自定义参数
|
|
this.options = $.extend({}, this.defaults, opt);
|
|
};
|
|
|
|
PopupLayer.prototype = {
|
|
init: function() {
|
|
this.attachElems();
|
|
this.updateContent();
|
|
this.bindEvents();
|
|
},
|
|
updateContent: function() {
|
|
this.$content.html($(this.options.content));
|
|
|
|
var that = this;
|
|
$(function() {
|
|
that.$content.children().show();
|
|
});
|
|
|
|
var content_position = {
|
|
top: 63,
|
|
right: 38,
|
|
bottom: 0,
|
|
left: 38
|
|
}
|
|
|
|
content_position[this.options.to] = "100%";
|
|
|
|
this.$content.css({
|
|
'top': content_position.top,
|
|
'right': content_position.right,
|
|
'bottom': content_position.bottom,
|
|
'left': content_position.left,
|
|
'color': this.options.color,
|
|
'background-color': this.options.backgroundColor,
|
|
'transition': 'all ' + (this.options.speed / 1000) + 's'
|
|
});
|
|
|
|
},
|
|
attachElems: function() {
|
|
this.$content.appendTo(this.$mask);
|
|
this.$mask.appendTo($(this.options.target));
|
|
},
|
|
open: function() {
|
|
this.$mask.fadeIn(this.options.speed);
|
|
|
|
// 如果screenRatio为0那么根据屏幕宽高计算占比
|
|
if (this.options.screenRatio != 0) {
|
|
this.$content.css({
|
|
[this.options.to]: (1 - this.options.screenRatio) * 100 + "%"
|
|
});
|
|
} else {
|
|
var ratio = 0;
|
|
|
|
if (this.options.to == "left" || this.options.to == "right"){
|
|
ratio = this.options.heightOrWidth / $(window).outerWidth();
|
|
|
|
} else {
|
|
ratio = this.options.heightOrWidth / $(window).outerHeight();
|
|
}
|
|
this.$content.css({
|
|
[this.options.to]: (1 - ratio) * 100 + "%"
|
|
});
|
|
}
|
|
|
|
|
|
if (this.options.blur) {
|
|
this.$blurAreas.addClass('popup-layer-blur');
|
|
}
|
|
|
|
if (this.options.openCallback) {
|
|
this.options.openCallback();
|
|
}
|
|
},
|
|
close: function() {
|
|
this.$mask.fadeOut(this.options.speed);
|
|
this.$content.css({
|
|
[this.options.to]: "100%"
|
|
})
|
|
|
|
if (this.options.blur) {
|
|
this.$blurAreas.removeClass('popup-layer-blur');
|
|
}
|
|
|
|
if (this.options.closeCallback) {
|
|
this.options.closeCallback();
|
|
}
|
|
},
|
|
bindEvents: function() {
|
|
var that = this;
|
|
this.$elem.click(function() {
|
|
that.open();
|
|
});
|
|
|
|
// 阻止点击content时冒泡到上层
|
|
if (!this.options.contentToggle) {
|
|
this.$content.click(function(event) {
|
|
event.stopPropagation();
|
|
});
|
|
}
|
|
|
|
this.$mask.click(function() {
|
|
that.close();
|
|
});
|
|
|
|
if (this.options.closeBtn) {
|
|
$(this.options.closeBtn).click(function() {
|
|
that.close();
|
|
})
|
|
}
|
|
}
|
|
};
|
|
|
|
$.fn.PopupLayer = function(options) {
|
|
return this.each(function() {
|
|
new PopupLayer(this, options).init();
|
|
});
|
|
};
|
|
|
|
})(jQuery);
|