手机webApp popup.js 弹出层效果

主要使用在手机端中的弹出层插件。 web pc  中的ie 还没有测试。

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样式：

.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     });