PopupDragHandleControlID プロパティが設定されているときに ModalPopupExtender を画面の中央に配置することに問題があります (このプロパティがなくても正常に動作します)。
ModalPopupExtender が画面の中央に配置されていません。問題の原因は、ページの CSS レイアウトが原因で、無効にしたときにポップアップが画面の中央に配置されることだと思います (PopupDragHandleControlID プロパティが設定されている場合にのみ、ページの CSS が ModalPopupExtender に影響する理由がわかりません)
ページ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="container">
<div id="center" class="column">
<div id="centercolcontent" class="centercolcontent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Text="Open" />
<asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" style="display: none;">
<cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlUploader" CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="pnlUploader" RepositionMode="RepositionOnWindowResize" />
<div id="pnlDragMe" class="pnlDragMe">
Image Uploader
</div>
<div class="upload" id="upload">
<div id="status" class="info">
Please select a file to upload
</div>
<div class="commands">
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClientClick="javascript:onUploadClick()" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div id="left" class="column">
</div>
<div id="right" class="column">
</div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>
CSS:
body
{
min-width: 630px;
}
#container
{
padding-left: 200px;
padding-right: 150px;
}
#container .column
{
position: relative;
float: left;
}
#center
{
padding: 0px 0px;
width: 100%;
}
#left
{
width: 200px;
padding: 0 0px 0 0;
right: 200px;
margin-left: -100%;
}
#right
{
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer
{
clear: both;
}
* html #left
{
left: 150px; /* RC fullwidth */
}
/*** Equal-height Columns ***/
#container
{
overflow: hidden;
}
#container .column
{
padding-bottom: 1001em; /* X + padding-bottom */
margin-bottom: -1000em; /* X */
}
* html body
{
overflow: hidden;
}
* html #footer-wrapper
{
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #FFF; /*** Same as body background ***/
}
body
{
margin: 0;
padding: 0;
}
#header, #footer
{
font-size: large;
text-align: center;
padding: 0.3em 0;
}
#left
{
/*background: #66F;*/
}
#center
{
background: #DDD;
}
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}