實現項目中的通用彈框的類

需要注意的是function裏面的function函數的this指針發生改變，用了臨時變量var _this= this來保存

var dialog_html= '\
<img alt="點擊可以關閉" src="/static/images/disk.png" width="40px" height="30px;">\
<div class="title"></div>\
<div class="loadgif"><img alt="Loading..." src="/static/images/load.gif"/></div>\
<div class="content"><span class="active"></span></div>\
<div class="partparam"></div>\
<div class="bottom">\
    <input type="button" class="btnok" value="OK">\
    <input type="button" class="btnnoOk" value="CANCEL">\
</div>';

function  Dialog(select,store_name) {
    this.select = select;//原來選擇器
    this.status = "";   //對話框狀態
    this.div = $(this.select); //jquery對象
    this.store_name = store_name
}

Dialog.prototype.get_div = function () {
    return this.div;
};

//彈框
Dialog.prototype.open = function(){
    this.close();//防止連續創建對話框
    this.div.append(dialog_html);
    this.div.find(".loadgif").hide();
    this.div.css("display",'block');
    this.div.css("left", window.scrollX+(window.innerWidth - this.div.width()) / 2).css("top", window.scrollY+(window.innerHeight - this.div.height()) / 2);
};

//關閉並清理
Dialog.prototype.close= function(){
    this.div.empty();
    this.div.css("display",'none');
    this.status = "";
};

//點擊取消，鼠標點擊和回車鍵盤都可以用
Dialog.prototype.register_cancel = function (fn) {
    this.div.on("click keyup",".btnnoOk",function (event) {
        if(event.type =="keyup" && event.keyCode != 13){
            return;
        }
        fn();
    });
};

//點擊確定，鼠標點擊和回車鍵盤都可以用
Dialog.prototype.register_ok = function (fn, status) {
    var _this = this;//在回調的this會變；
    this.div.on("click keyup", ".btnok", function (event) {
        if (event.type == "keyup" && event.keyCode != 13) {
            return;
        }
        if (!_this.check_status(status)) {
            return;
        }
        fn();
    });
};

Dialog.prototype.set_status = function (status) {
    this.status = status;
};
//檢查對話框狀態
Dialog.prototype.check_status = function (status) {
    if(this.status != status){
        this.close();
        return false;
    }else{
        return true
    }
};
//保存對話框輸入的文本
Dialog.prototype.param_add_input = function (desc, key) {
    var uuid = sessionStorage.getItem(this.store_name+key) ? sessionStorage.getItem(this.store_name+key):'';
    this.div.find(".partparam").append('<li><span><no>'+desc+'</no><input type="text" name="'+key+'" width="200px"  value="'+uuid+'"></span></li>');
};
Dialog.prototype.param_get_input = function (key) {
    var uuid = this.div.find("input[name='"+key+"']").val();
    sessionStorage.setItem(this.store_name+key, uuid);
    return uuid;
};


//請求結果輸出
Dialog.prototype.success_output=function (text) {
    this.div.find(".content span").removeClass("active").text(text);
    this.div.find(".partparam").css("display", "none");
};
Dialog.prototype.fail_output=function (text) {
    this.div.find(".content span").addClass("active").text(text);
    this.div.find(".partparam").css("display","none");
};

使用這個類：彈出的時候open一下，然後註冊上ok和cancel按鈕

var mountdialog = new Dialog("#mountdialog","");
$(".parts").on("click",".part",function () {
    if($(this).hasClass("active2")){
        var part = $(this).text().split('/')[0];
        mountdialog.close();
        var div = mountdialog.get_div();
        div.attr("part", part);
        objstoredialog.open();
        div.find(".title").text($.i18n.prop('Osd_start_mount_prompt1'));
        div.find(".content span").removeClass("active").text($.i18n.prop('Osd_start_mount_text1'));
    }
});
mountdialog.register_cancel(function () {
    mountdialog.close();
});

mountdialog.register_ok(function () {
    var div = mountdialog.get_div();
    var part = div.attr("part");
    $.ajax({
        url: "/osd/opt/mount",
        type: "POST",
        datatype: 'json',
        data: {"server_ip": get_cur_server(),"part": part},
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", getCookie2('csrftoken'));
        },
        success: function (arg) {
            mountdialog.close();
        }
    });
},'');