仿IOS风格弹窗uiAlertView嵌套弹出层问题的修改

网页原地址：http://www.jq22.com/demo/uiAlertView201712071705/#

挺喜欢这个弹出层插件，效果如下：

可惜嵌套使用时存在问题，只能弹出第一层。也即弹出：“确定要删除吗？”，回调函数里再弹出“删除成功”的提示就存在bug。

查阅代码后发现问题的根源是弹出第一层点击后，关闭弹出层时，直接使用类选择器，且动态生成的层所取id都一致，导致后来弹出的层还没有展现就被remove了。

修改后直接按原来用法使用即可。

修改如下：粗体为修改的内容。

(function($) {
    $.extend({
                alertView : function(options) {
                    var currTime=((new Date()).getTime()+"").substring(8);
                    var mask_Id="popup_dialog_mask_"+currTime;
                    var dialog_Id="popup_dialog_"+currTime;
                    var defaults = {
                        showMask : true,
                        title : "",
                        msg : "",
                    };
                    var settings = {};
                    if ($.type(options) == "string") {
                        settings = defaults;
                        settings.msg = options;
                    } else if ($.type(options) == "object") {
                        settings = $.extend(true, defaults, options);
                    }
                    if (!settings.buttons || settings.buttons.length == 0) {
                        settings.buttons = [ {
                            title : "确定"
                        } ];
                    }
                    $.closeView(mask_Id,dialog_Id);
                    if (settings.showMask) {
                        $("body")
                                .append(
                                        '<div id="'+mask_Id+'" class="lodding-mask"></div>');
                    }
                    var popupDialog = $('<div id="'+dialog_Id+'" class="popup-dialog"></div>');
                    if (settings.title) {
                        popupDialog.append('<h3 id="popup-dialog-title_"'+currTime+'>'
                                + settings.title + '</h3>');
                    }
                    popupDialog
                            .append('<p id="popup-dialog-msg_"'+currTime+' class="message '
                                    + ((settings.title ? "" : "margin-top-15"))
                                    + '">' + settings.msg + '</p>');
                    if (settings.input && $.type(settings.input) == 'object') {
                        var html = "<input"
                        $.each(settings.input, function(key, value) {
                            html += ' ' + key + '="' + value + '"';
                        })
                        html += "/>";
                        $(html).appendTo(popupDialog);
                    }
                    var btnSize = settings.buttons.length;
                    if (btnSize == 2) {
                        var buttonGroup = $('<div class="ui-grid-a group"></div>');
                        $.each(settings.buttons, function(i, btnJson) {
                            var color = btnJson.color ? 'style="color:'
                                    + btnJson.color + '"' : "";
                            var button = $('<div class="ui-block-'
                                    + (i == 0 ? "a" : "b") + '" ' + color + '>'
                                    + btnJson.title + '</div>');
                            addBtnEvent(button, btnJson,mask_Id,dialog_Id);
                            buttonGroup.append(button);
                        });
                        popupDialog.append(buttonGroup);
                    } else {
                        $.each(settings.buttons, function(i, btnJson) {
                            var color = btnJson.color ? 'style="color:'
                                    + btnJson.color + '"' : "";
                            var button = $('<div class="ui-grid-a'
                                    + (i == 0 ? " group" : "") + '" ' + color
                                    + '>' + btnJson.title + '</div>');
                            addBtnEvent(button, btnJson,mask_Id,dialog_Id);
                            popupDialog.append(button);
                        })
                    }
                    $("body").append(popupDialog);
                },
                closeView : function(maskId,dialogId) {
                    /*$(".popup-dialog, .lodding-mask").fadeOut(50, function() {
                        $(this).remove();
                    });*/
                    $("#"+maskId+",#"+dialogId).fadeOut(50, function() {
                        $(this).remove();
                    });
                }
            });
    function addBtnEvent(btn, btnJson,maskId,dialogId) {
        btn.on("click", function() {
            if (btnJson.click && typeof (btnJson.click) == "function") {
                var content = $(this).closest("div.popup-dialog");
                var val = $.trim(content.find("input").val());
                btnJson.click(val, content);
            }
            if (!btnJson.hasOwnProperty("autoClose")
                    || btnJson.autoClose != false) {
                $.closeView(maskId,dialogId);
            }
        });
    }
})(jQuery);
jQuery(function() {
    document.body.addEventListener('touchstart', function() {
    });
});

简单用法：先加工下代码，使用起来更方便：

var DZW={

   confirm : function(info,okFun,cancelFun){
       var json = {
                title:"",
                msg:info,
                buttons:[
                    { title:"确定",color:"red",click:function(){if(okFun)okFun();} },
                    { title:"取消",color:"green",click:function(){if(cancelFun)cancelFun();} }
                ]
            }
       $.alertView(json);
   },
   alert : function(info,fun){
       var json = {
                title:"",
                msg:info,
                buttons:[
                    { title:"确定",color:"red",click:function(){if(fun)fun();} }
                ]
            }
       $.alertView(json);
   }
}

<script type="text/javascript">

function goDel(url){
    DZW.confirm('确定要删除吗?', function(){
        $("body").mLoading("show");
        var json=DZW.getJsonData(url,param);
        setTimeout(function(){
            $("body").mLoading("hide");
            if(json.msg = "success"){
                DZW.alert("删除成功!",function(){
                    location.href="/stutask/student/calendar.do";
                });
            }else{
                DZW.alert(json.msg);
            }
        },200);
    });
}
</script>

完整代码及使用demo请移步：https://download.csdn.net/download/ohaozy/10575769