码迷,mamicode.com
首页 > 其他好文 > 详细

MSCRM2013模拟模态窗口

时间:2014-09-19 17:02:35      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   div   

  由于Chrome不支持showModelDialog,若在Chrome中使用MSCRM2013,则无法使用模态窗口。

以下代码是参考MSCRM中分派、共享等功能的窗口,实现的模拟showModelDialog效果。

可将以下JS作为资源导入CRM:

bubuko.com,布布扣
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模拟模态窗口

标签:style   blog   http   color   io   os   使用   ar   div   

原文地址:http://www.cnblogs.com/leidian/p/3981608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!