手机webApp popup.js 弹出层效果

来源：互联网发布：手机淘宝卖家客户端编辑：程序博客网时间：2024/04/27 20:19

主要使用在手机端中的弹出层插件。 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    });

0 0