MSCRM2013類比模態視窗

標籤：style   blog   http   color   io   os   使用   ar   div   

　　由於Chrome不支援showModelDialog，若在Chrome中使用MSCRM2013，則無法使用模態視窗。

以下代碼是參考MSCRM中指派、共用等功能的視窗，實現的類比showModelDialog效果。

可將以下JS作為資源匯入CRM：

if (typeof (XJS) != "undefined"){    alert("自訂JS衝突，未正常載入！");}else{    XJS =    {        //建立類比對話方塊        _CreateModalDialog: function (oUrl, oWidth, oHeight, oInnerHtml)        {            if (window.top.ModalDialogBackgroundDiv == undefined)   //防止重複建立            {                //背景                var bg = top.document.createElement("div");                bg.id = "ModalDialogBackgroundDiv";                bg.className = "ms-crm-InlineDialogBackground";                bg.style.position = "absolute";                bg.style.width = "100%";                bg.style.height = "100%";                bg.style.top = "0px";                bg.style.zIndex = 2010;                bg.style.opacity = 0.5;                bg.style.backgroundColor = "#808080";                top.document.body.appendChild(bg);                if (oUrl != null)                {                    //等待                    var loading = top.document.createElement("div");                    loading.id = "ModalDialogLoadingDiv";                    loading.style.position = "absolute";                    loading.style.width = oWidth + "px";                    loading.style.height = oHeight + "px";                    loading.style.left = "50%";                    loading.style.top = "50%";                    loading.style.marginLeft = "-" + (oWidth / 2).toString() + "px";                    loading.style.marginTop = "-" + (oHeight / 2).toString() + "px";                    loading.style.zIndex = 2030;                    loading.style.backgroundColor = "#ffffff";                    loading.innerHTML = "<table class=\"ms-crm-LoadingContainer\" style=\"width:100%;height:100%\">"                                    + "<tr class=\"ms-crm-LoadingContainer\"><td style=\"vertical-align: middle\" align=\"center\">"                                    + "<img id=\"DialogLoadingDivImg\" alt=\"\" src=\"/_imgs/AdvFind/progress.gif\"><br>正在載入..."                                    + "</td></tr></table>";                    top.document.body.appendChild(loading);                    //顯示iframe內容                    var iframeDiv = top.document.createElement("div");                    iframeDiv.id = "ModalDialogIframeDiv";                    iframeDiv.className = "ms-crm-DialogChrome";                    iframeDiv.style.position = "absolute";                    iframeDiv.style.width = oWidth + "px";                    iframeDiv.style.height = oHeight + "px";                    iframeDiv.style.left = "50%";                    iframeDiv.style.top = "50%";                    iframeDiv.style.marginLeft = "-" + (oWidth / 2).toString() + "px";                    iframeDiv.style.marginTop = "-" + (oHeight / 2).toString() + "px";                    iframeDiv.style.zIndex = 2020;                    iframeDiv.innerHTML = "<iframe src=\"\" id=\"ModalDialog_Iframe\" style=\"height: " + oHeight + "px; width: " + oWidth + "px; border: 0px;\"></iframe>"                    top.document.body.appendChild(iframeDiv);                    var iframe = top.document.getElementById("ModalDialog_Iframe");                    if (iframe.attachEvent) //IE瀏覽器                    {                        iframe.attachEvent("onload", function () { top.ModalDialogLoadingDiv.style.display = "none"; });                    }                    else //非IE瀏覽器                    {                        iframe.onload = function () { top.ModalDialogLoadingDiv.style.display = "none"; };                    }                    iframe.src = oUrl;                }                else if (oInnerHtml != null)                {                    //顯示div內容                    var htmlDiv = top.document.createElement("div");                    htmlDiv.id = "ModalDialogHtmlDiv";                    htmlDiv.className = "ms-crm-DialogChrome";                    htmlDiv.style.position = "absolute";                    htmlDiv.style.width = oWidth + "px";                    htmlDiv.style.height = oHeight + "px";                    htmlDiv.style.left = "50%";                    htmlDiv.style.top = "50%";                    htmlDiv.style.marginLeft = "-" + (oWidth / 2).toString() + "px";                    htmlDiv.style.marginTop = "-" + (oHeight / 2).toString() + "px";                    htmlDiv.style.zIndex = 2040;                    htmlDiv.style.backgroundColor = "#ffffff";                    top.document.body.appendChild(htmlDiv);                    htmlDiv.innerHTML = oInnerHtml;                }            }        },        //建立類比對話方塊        ShowIframeModalDialog: function (oUrl, oWidth, oHeight)        {            XJS._CreateModalDialog(oUrl, oWidth, oHeight, null);        },        //建立類比對話方塊        ShowHtmlModalDialog: function (oInnerHtml, oWidth, oHeight)        {            XJS._CreateModalDialog(null, oWidth, oHeight, oInnerHtml);        },        //關閉類比對話方塊        CloseModalDialog: function ()        {            if (window.top.ModalDialogBackgroundDiv != undefined)                window.top.document.body.removeChild(window.top.ModalDialogBackgroundDiv);            if (window.top.ModalDialogLoadingDiv != undefined)                window.top.document.body.removeChild(window.top.ModalDialogLoadingDiv);            if (window.top.ModalDialogIframeDiv != undefined)                window.top.document.body.removeChild(window.top.ModalDialogIframeDiv);            if (window.top.ModalDialogHtmlDiv != undefined)                window.top.document.body.removeChild(window.top.ModalDialogHtmlDiv);        },    };}

View Code

 

調用：XJS.ShowIframeModalDialog("http://www.cnblogs.com",400,300);

第一個參數是要調用的頁面地址

第二個參數是顯示的寬度(px)

第三個參數是顯示的高度(px)

關閉：在顯示的頁面中調用top.XJS.CloseModalDialog()，在上面的例子中，由於www.cnbolgs.com不受我們控制，肯定是關不掉了。

或者可以完善一下代碼，在顯示的框右上方加個關閉按鈕，我這裡就不寫了。

 

怎麼傳遞參數？父視窗與iframe視窗的傳參問題，就不說了吧。

（注意調用匯入到CRM資源中的頁面時，URL傳參用data參數，其他參數會報錯的，具體看SDK吧）

 

MSCRM2013類比模態視窗