JS彈出框插件zDialog再次封裝 - s0611163－IT工程師數位筆記本

文章出處

zDialog插件網址：http://www.jq22.com/jquery-info2426

再次封裝zDialog的代碼：

(function ($) {
    $.extend({
        iDialog: function (param) {
            var diag = new Dialog();
            if (!param.height && !param.width) {
                diag.Width = $(top.window).width();
                diag.Height = $(top.window).height();
            }
            else {
                diag.Width = param.width;
                diag.Height = param.height;
            }
            diag.Title = param.title;
            diag.Drag = false;
            diag.ShowButtonRow = false; //ShowButtonRow：是否不顯示按鈕欄，值為布爾型(true|false)，默認值為false，當定義了OKEvent或調用了addButton時自動設為true。
            diag.URL = param.url;
            diag.OkEvent = param.OkEvent; //這里是OkEvent而不是OKEvent，是為了隱藏彈出框自帶按鈕欄
            diag.show();
        }
    });
})(jQuery);

View Code

彈出最大化窗口(因插件本身的原因，最大化窗口比實際window大小略小一點)：

//彈出最大化窗口
$.iDialog({
    title: "修改",
    url: "/Auth/UserManage/Edit?id=" + row.Id,
    OkEvent: function () {
        reloadgrid(); //調用方法刷當前頁面，即彈出框的父頁面
    }
});

View Code

彈出一般窗口：

$.iDialog({
    title: "添加",
    url: "/Auth/UserManage/Add",
    width: 500,
    height: 300,
    OkEvent: function () {
        save();
    }
});

View Code

當窗口中的頁面保存成功，需要刷新父窗口，這樣調用：

parentDialog.OkEvent();
parentDialog.close();

View Code

當窗口中的頁面保存成功時，傳值給父頁面，這樣調用：

父頁面：

$.iDialog({
    title: "添加",
    url: "/Auth/UserManage/Add",
    width: 500,
    height: 300,
    OkEvent: function (userName) {
        $("#UserName").val(userName)
    }
});

View Code

子頁面：

//保存
function save() {
    parentDialog.OkEvent($("#UserName").val());
    parentDialog.close();
}

View Code

子窗體如何關閉當前窗體，再關閉父窗體，并刷新父窗體的父頁面：

子窗體中數據保存完成后，這樣調用：

parentDialog.OkEvent(parentDialog);

View Code

子窗體的父窗體中這樣調用：

$.iDialog({
    title: "添加",
    url: "/Auth/UserManage/Add",
    width: 800,
    height: 400,
    OkEvent: function (childDialog) {
        parentDialog.OkEvent(); //刷新父窗體的父頁面
        childDialog.close(); //先關子窗體
        parentDialog.close(); //再關父窗體
    }
});

View Code

封裝后，該插件的特點：多層彈出，且彈出到框架的最頂層；使用方便，代碼簡捷；可以方便地刷新父頁面，可以方便地向父頁面傳值。

示意圖：

為什么要封裝這個插件？我之前用的插件是lhgDialog，是這樣封裝的：

/**
* lhgdialog 彈出框封裝
* @param 參數
*/
(function ($) {
    $.extend({
        iDialog: function (param) {
            if (typeof (param) == "object") {
                var api;
                if (frameElement && frameElement.api) {
                    api = frameElement.api;
                    $.dialog.setting.zIndex++;
                }
                else {
                    $.dialog.setting.zIndex = 1977;
                }
                var max = false;
                if (!param.width && !param.height) {
                    param.width = $(top.window).width() - 18;
                    param.height = $(top.window).height() - 45;
                    param.drag = false;
                    max = true;
                }
                var defaultParam = $.extend({
                    max: false,
                    min: false,
                    drag: true,
                    lock: true,
                    top: "50%",
                    width: '800px',
                    resize: false,
                    parent: api
                }, param);
                if (max) {
                    $.dialog(defaultParam).max();
                } else {
                    $.dialog(defaultParam);
                }
            } else if (typeof (param) == "string" && param == "close") {
                if (frameElement.api.opener.reloadgrid) {
                    frameElement.api.opener.reloadgrid();
                }
                else if (frameElement.api.opener.refresh) {
                    frameElement.api.opener.refresh();
                } else {
                    frameElement.api.opener.location = frameElement.api.opener.location;
                }
                frameElement.api.close();
            }
            else {
                alert("iDialog參數錯誤");
            }
        }
    });
})(jQuery);

View Code

這樣使用：

$.iDialog({
    title: '報告流轉過程',
    height: "500px",
    width: "800px",
    content: "url:/ViewReport/ViewReport/ReportFlow?ReportCode=" + row.REPORTCODE
});

View Code

存在的問題：1、彈出兩層窗口，當關閉子窗口時，遮罩層沒了，而父窗口還在，這顯然是BUG，為什么官網上的Demo是正常的呢？因為它對插件加載有要求，我是在Layout里加載的，所以，所有頁面都將這個插件加載一遍，這就是導致BUG的原因。2、如果父頁面是Index，彈出Edit窗體，再在Edit窗體里彈出Add窗體，那么在Add窗體里調用方法alert(frameElement.api.opener.location.href);那么提示的url是Index的url而不是Edit的url，這樣子窗體能找到父窗體的父頁面，而找不到父窗體。

花了一兩天時間，終于解決遮罩層問題，代碼如下：

/*!
 * 框架頁面卸載前關閉所有穿越的對話框
 * 同時移除拖動層和遮罩層
 */
_top != window && $(window).bind('unload',function()
{
    var bl = true; //此處修改
    var list = lhgdialog.list;
    for( var i in list )
    {
        if (list[i]) {
                //此處修改
            if (!lhgdialog.list[i]._lock && !lhgdialog.list[i].parent) {
                bl = false;
            }
            list[i].close();
        }
    }
    _singleton && _singleton.DOM.wrap.remove();
    
    _$doc.unbind('keydown',onKeyDown);
    
    if (bl) { //此處修改
        $('#ldg_lockmask', _doc)[0] && $('#ldg_lockmask', _doc).remove();
        $('#ldg_dragmask', _doc)[0] && $('#ldg_dragmask', _doc).remove();
    }
});