我有一个在画面的中心位置ModalPopupExtender问题时，它的PopupDragHandleControlID属性设置（如果没有这个属性，它工作正常）。
ModalPopupExtender并不位于屏幕的中心。我认为是什么原因导致的问题是页面的CSS布局的原因，当我禁用它，放置在屏幕中央弹出（我不明白为什么页面的CSS影响ModalPopupExtender只有当它的PopupDragHandleControlID属性设置）
这一页：
<!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;
}
模式弹出面板中指定的绝对位置。因此，它需要具有非静态位置的元素中。在这种情况下，我希望它在页面上居中，所以我把它放在一个元素中（在这种情况下，一个UpdatePanel，但不要紧它是什么样的元素），其具有的位置内嵌样式：固定;左：0;顶部：0。
<asp:UpdatePanel ID="updProductPopup" runat="server" style="position:fixed;left:0;top:0;">
<contenttemplate>
<act:ModalPopupExtender ID="mpeProduct" runat="server" BackgroundCssClass="modalPopupBackground" BehaviorID="behaviourModalPopup" OkControlID="btnMpClose" PopupControlID="pnlModalPopup" PopupDragHandleControlID="pnlMpHandle" TargetControlID="btnMpHidden">
</act:ModalPopupExtender>
<!-- pnlModalPopup MUST have inline style display:none -->
<asp:Panel ID="pnlModalPopup" runat="server" CssClass="modalPopup" style="display:none;">
<asp:Panel runat="server" ID="pnlMpHandle" CssClass="modalPopupDragHandle">
Panel Header
</asp:Panel>
<asp:Panel runat="server" ID="pnlMpContent">Here's my content</asp:Panel>
<p class="modalPopupClose">
<a id="btnMpClose" href="#" class="custom-button">Close</a>
</p>
</asp:Panel>
<asp:Button ID="btnMpHidden" runat="server" Text="Button" CssClass="modalPopupHiddenButton" />
</contenttemplate>
我知道了原来的问题是很老，但我花了很多时间寻找的答案，这个问题没有找到它，这个问题是出现相当高的谷歌，所以希望这将节省别人一些时间。
.panel
{
position: absolute;
top: 50%;
left:50%;
}
<asp:Panel id ="pnlUploader" CssClass="panel">
删除参数X，默认情况下y和repositio NMODE需要中央位置还当您滚动。
使用X和ModalPopupExtender Y的属性。
我知道这是老了，但没有答案了......所以它的好不好？
反正...确保面板从主网页DIV /面板分离。它使用的是作为窗口设置位置。
我知道，这是一个很古老的问题，但也来到这里寻找一个解决方案，我想我可能会发布怎样我终于解决了这个问题，去帮助别人。
只要使用这种风格在你的面板：
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />
“重要”条款将覆盖从modalpopupextender所有其他设置。该百分比是从Twitter的引导作为一个标准。 “显示”，也可以防止您的面板显示在加载页面。
这花了我frickin年龄段制定出了我的情况，但最终所有我需要做的就是改变我从100％延伸到一个固定的高度比面板大面板的高度。
<asp:Panel ID="pnlUploader" Width="500px"...
我也有我的扩展面板之外，但怀疑的事项。 AjaxControlToolkit不喜欢的！
该ModalPopupExtender显示给出Panel中心的DIV中，你声明的PopupControlId的Panel。因此，尝试保留在您定义它的ModalPopupExtender，并移出其容器弹出Panel（甚至出UpdatePanel的）。这个对我有用。
祝好运。
#ModalPopUp
{
Position:relative;
Height:400px;
Width:400px;
Margin-left:auto;
Margin-right:auto;
}
这应该在你的页面的中心位置弹出式窗口。然后，只需设置为modalbackground的CSS，你应该罚款。
汤姆
我用这个和它的伟大的工作。你要找的地方是X = “100” Y = “100”。它给予固定的位置和popupDragHandleControlID给你，你要拖动窗口的可能性。这里的解决方案
<ajaxToolkit:ModalPopupExtender ID="mpePopupTestAdd" runat="server" TargetControlID="hfdPopupAnchorTestAdd" PopupDragHandleControlID="pnlPopupTestAdd" X="100" Y="100" PopupControlID="pnlPopupFilterAdd" CancelControlID="btnCancelFilterAdd" BackgroundCssClass="ModalPopupBG"></ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopupTestAdd" Style="display: none" runat="server" Width="550" DefaultButton="btnOKTestAdd">
<div id="divContainerTestAdd" runat="server" class="panel Test">
<!-- header-->
<!-- Body -->
</div>
</asp:Panel>
希望这可以通过两种方式来实现。
CSS：
.hcenter{margin:0 auto; width:200;} /* I have given a sample width you give the width of your popup */
CODE：
<asp:Panel ID="pnlUploader" runat="server" CssClass="hcenter" style="display: none;">
<cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlUploader" CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="pnlUploader"
RepositionMode="RepositionOnWindowResize" />
...