关于ModalPopupExtender控件不能居中显示的一些解决方法

在Asp.net程序的开发中经常需要利用ModalPopupExtender控件来弹出一些对话框，通常来说ModalPopupExtender控件可以正常的完成工作，但在一些个别的情况下ModalPopupExtender控件却会出现“对话框不显示在屏幕正中间”或是“点击对话框标题时，对话框位置发生变化”的问题。下面就说一下我在利用ModalPopupExtender做开发遇到的一些问题和解决方法。

点击对话框标题栏时对话框位置发生变化

该问题主要表现为对话框出现后，如果你点击一下对话框的标题，这时对话框的位置会发生偏移，具体请参看下面的两个图,左图为点击标题前，右图为点击标题后。

                                                            

解决方法

出现这种问题的原因一种是可能你的AjaxControlToolkit程序集版本太低，这时你只需要更新程序集的最新版本就可以解决了。但是如果你像我一样是修改的老产品的代码不能随便更新程序集的版本的话，你只需要删除ModelPopinExtender的PopupDragHandleControlID属性即可，不过这带来了一个缺点，就是弹出的对话框变成了不可拖动的。

<ajaxToolkit:ModalPopupExtender ID="mpeMessageDialog" runat="server" TargetControlID="hiddenTargetControlForModalPopup" 
                PopupControlID="pnlMessageDialog" BackgroundCssClass="popin_background" 
                CancelControlID="btnClose" RepositionMode="None"   PopupDragHandleControlID="popinDraghandler">
</ajaxToolkit:ModalPopupExtender>

 

弹出的对话框不显示在屏幕正中间

该问题主要表现为要么弹出的对话框出现在偏左或偏右的位置，要么当页面有滚动条时，明明你是在页面底部弹出的对话框，但对话框却显示在页面顶部的位置。

解决方法

一般来说我们可以通过重新编译AjaxControlToolkit程序集的方法来解决这个问题。重编译的步骤如下：

1. 去CodePlex下载AjaxControlToolkit的源码。

2. 利用Visual Studio打开源码，然后替换Common.js的getClientBounds方法的Switch语句如下：

 switch(Sys.Browser.agent) {
            case Sys.Browser.InternetExplorer:
                 if (document.documentElement && document.documentElement.clientWidth)
                    clientWidth = document.documentElement.clientWidth;
                else if (document.body)
                    clientWidth = document.body.clientWidth;
                //clientWidth = document.documentElement.clientWidth;
                if (document.documentElement && document.documentElement.clientHeight)
                    clientHeight = document.documentElement.clientHeight;
                else if (document.body)
                    clientHeight = document.body.clientHeight;
                //clientHeight = document.documentElement.clientHeight;
                break;
            case Sys.Browser.Safari:
                clientWidth = window.innerWidth;
                clientHeight = window.innerHeight;
                break;
            case Sys.Browser.Opera:
                clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                break;
            default:  // Sys.Browser.Firefox, etc.
                clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                break;
        }

3. 修改ModalPopupBehavior.js的initialize逻辑如下：

   替换 this._backgroundElement.style.position = 'fixed' ; 为  this._backgroundElement.style.position = 'absolute';//'fixed';

    替换 this._foregroundElement.style.position = 'fixed';   为  this._foregroundElement.style.position = 'absolute';//'fixed';

4. 重编译程序集，用新生成的AjaxControlToolkit.dll替换原先的dll.

通过以上的步骤，绝大部分情况下ModalPopupExtender控件不能居中的问题都能解决，但如果你的页面比较长，会出现纵向滚动条，这时在PC机上浏览时可能没有问题，但在iPad上却仍然会出现不能居中显示的问题，对于ModalPopupExtender在iPad上的使用，我还没找到比较好的解决方法，可能最好的解决方法还是尽量避免大的页面出现吧，因为只要不出现滚动条，ModalPopupExtender就可以很好的在iPad上工作。