popup.js 插件js
(function ($) {
"use strict";
$.fn.popup = function (opts) {
return new popup(this[0], opts);
};
var queue = [];
var popup = function (containerEl, opts) {
if (typeof containerEl === "string" || containerEl instanceof String) {
this.container = document.getElementById(containerEl);
} else {
this.container = containerEl;
}
if (!this.container) {
window.alert("Error finding container for popup " + containerEl);
return;
}
try {
if (typeof (opts) === "string" || typeof (opts) === "number")
opts = {
message: opts,
cancelOnly: "true",
cancelText: "OK"
};
this.id = opts.id = opts.id; //opts is passed by reference
this.addCssClass = opts.addCssClass ? opts.addCssClass : "";
this.suppressTitle = opts.suppressTitle || this.suppressTitle;
this.title = opts.suppressTitle ? "" : (opts.title || "Alert");
this.message = opts.message || "";
this.cancelText = opts.cancelText || "Cancel";
this.cancelCallback = opts.cancelCallback || function () {};
this.cancelClass = opts.cancelClass || "button";
this.doneText = opts.doneText || "Done";
this.doneCallback = opts.doneCallback || function () {
// no action by default
};
this.doneClass = opts.doneClass || "button";
this.cancelOnly = opts.cancelOnly || false;
this.effectTime = opts.effectTime || 200;
this.onShow = opts.onShow || function () {};
this.autoCloseDone = opts.autoCloseDone !== undefined ? opts.autoCloseDone : true;
queue.push(this);
if (queue.length === 1)
this.show();
} catch (e) {
console.log("error adding popup " + e);
}
};
popup.prototype = {
id: null,
addCssClass: null,
title: null,
message: null,
cancelText: null,
cancelCallback: null,
cancelClass: null,
doneText: null,
doneCallback: null,
doneClass: null,
cancelOnly: false,
effectTime: null,
onShow: null,
autoCloseDone: true,
suppressTitle: false,
show: function () {
var self = this;
var markup = "<div id='" + this.id + "' class='popup hidden "+ this.addCssClass + "'>"+
"<header>" + this.title + "</header>"+
"<div class='popup_cont'>" + this.message + "</div>"+
"<footer>"+
"<a href='javascript:;' class='" + this.doneClass + "' id='action'>" + this.doneText + "</a>"+
"<a href='javascript:;' class='" + this.cancelClass + "' id='cancel'>" + this.cancelText + "</a>"+
"<div style='clear:both'></div>"+
"</footer>"+
"</div>";
var $el=$(markup);
$(this.container).append($el);
$el.bind("close", function () {
self.hide();
});
if (this.cancelOnly) {
$el.find("A#action").hide();
$el.find("A#cancel").addClass("center");
}
$el.find("A").each(function () {
var button = $(this);
button.bind("click", function (e) {
if (button.attr("id") === "cancel") {
self.cancelCallback.call(self.cancelCallback, self);
self.hide();
} else {
self.doneCallback.call(self.doneCallback, self);
if (self.autoCloseDone)
self.hide();
}
e.preventDefault();
});
});
self.positionPopup();
$.blockUI(0.5);
$el.bind("orientationchange", function () {
self.positionPopup();
});
//force header/footer showing to fix CSS style bugs
$el.show(this.effectTime)
},
hide: function () {
var self = this;
$("#" + self.id).addClass("hidden");
$.unblockUI();
self.remove();
},
remove: function () {
var self = this;
var $el = $("#" + self.id);
$el.unbind("close");
$el.find("BUTTON#action").unbind("click");
$el.find("BUTTON#cancel").unbind("click");
$el.unbind("orientationchange").hide(this.effectTime)
setTimeout(function(){
$el.remove();
},this.effectTime)
},
positionPopup: function () {
var popup = $("#" + this.id);
popup.css("top", ((window.innerHeight / 2.5) + window.pageYOffset) - (popup[0].clientHeight / 2) + "px");
popup.css("left", (window.innerWidth / 2) - (popup[0].clientWidth / 2) + "px");
}
};
var uiBlocked = false;
$.blockUI = function (opacity) {
if (uiBlocked)
return;
opacity = opacity ? " style='opacity:" + opacity + ";'" : "";
$("BODY").prepend($("<div id='mask'" + opacity + " class='popup_bg'></div>"));
$("BODY DIV#mask").bind("touchstart", function (e) {
e.preventDefault();
});
$("BODY DIV#mask").bind("touchmove", function (e) {
e.preventDefault();
});
uiBlocked = true;
};
$.unblockUI = function () {
uiBlocked = false;
$("BODY DIV#mask").unbind("touchstart");
$("BODY DIV#mask").unbind("touchmove");
$("BODY DIV#mask").fadeOut(this.effectTime)
setTimeout(function(){
$("BODY DIV#mask").remove();
},this.effectTime)
};
$.popup=function(opts){
return $(document.body).popup(opts);
};
})(jQuery);
CSS样式：
CSS样式：
.popup_bg{ position:absolute; z-index:1000; background-color:#000; top:0px; left:0px; width:100%; height:100%;}
.popup{display:none;margin:-80px 0 0 -140px; position:absolute; z-index:1001; width:280px; background-color:#fff; border-radius:8px;}
.popup header{ height:50px; line-height:50px; text-align:center; border-bottom:1px solid #e6e6e6;}
.popup_cont{ padding:10px 10px; line-height:24px;}
.popup footer{ overflow:hidden; padding:5px 0 15px 0;}
.popup a.button{ width:110px; height:40px; line-height:40px; border-radius:5px; text-align:center; background-color:#00afba; color:#fff; padding:0; border:0; float:left; margin:0 15px;}
.popup a.button#cancel{ background-color:#ff864f;}
.popup a.button#cancel.center{ width:250px; background-color:#00afba;}
调用方法：
调用方法：
$.popup( {
title:"拓展提示",
message:"提示内容",
cancelText:"取消",
cancelCallback: function(){console.log("取消点击后的事件");},
doneText:"确定",
doneCallback: function(){console.log("确定点击后的事件");},
cancelOnly:true
});
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！