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

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

根据移动、联通、电信的电话号码号段,实现一个简单的正则表达式来验证手机号码: // 手机号校验export function isPhoneNumber(phoneNum) { // let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/; /* * 移动号码包括的号段:134/135/136/137,138,139; * 147/148(物
//正则验证手机号 正确返回 truefunction preg_mobile($mobile) {if(preg_match(/^1[34578]\d{9}$/, $mobile)) {return TRUE;} else {return FALSE;}}//验证电话号码function preg_tel($tel) {if(preg_match(/^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$/, $tel)) {re
其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 meta name=viewport content=width=device-width, initial-scale=1 / viewport的说明: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-wi
第一种方法: script type=text/javascriptfunction IsPC() { var userAgentInfo = navigator.userAgent; var Agents = [Android, iPhone, SymbianOS, Windows Phone, iPad, iPod]; var flag = true; for (var v = 0; v Agents.length; v++) { if (userAgent
今天开始小编为大家系统整理关于正则表达式的一系列文章,希望大家会喜欢。 首先了解一下正则表达式的概念,正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个
看到网上很多 代码 都很复杂,还包括以中文开头的86,17951,其实谁会填这么多,无非是检验一下他们是否位数对不对,开头有没有写错而已。下面我们从百度百科的手机号码历程来看:现在的手机号码段有联通、移动和电信。 电信 中国电信手机号码开头数字 2G/3G