我在设置PopupDragHandleControlID属性时将ModalPopupExtender定位在屏幕中心时遇到问题（没有此属性，它可以正常工作）。
ModalPopupExtender未位于屏幕中央。 我认为导致问题的原因是页面的CSS布局导致当我禁用它时，弹出窗口位于屏幕中央（我不明白为什么页面的css仅在设置了PopupDragHandleControlID属性时影响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;
}
答案 0 :(得分：16)
模态弹出式面板具有绝对位置。因此，它需要位于具有非静态位置的元素内。在这种情况下，我希望它以页面为中心，所以我把它放在一个元素中（在这种情况下是一个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>
我知道原来的问题已经很老了，但是我花了很多时间寻找这个问题的答案而没有找到它，而且这个问题在Google上得到了很高的评价，所以希望这会为别人节省一些时间
答案 1 :(得分：5)
使用ModalPopupExtender的x和y属性。
答案 2 :(得分：1)
我知道这已经过时了，但还没有答案......所以可以吗？
无论如何......确保面板与主页面div /面板分开。它使用它作为设置位置的窗口。
答案 3 :(得分：1)
我知道这是一个非常古老的问题，但也在这里寻找解决方案，我想我可以发布我最终如何解决问题，帮助他人。
只需在面板中使用该样式：
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />
“重要”子句将覆盖modalpopupextender中的所有其他设置。百分比来自twitter bootstrap作为标准。 “display”也会阻止您的面板在加载页面时显示。
答案 4 :(得分：0)
这让我花了很多时间来解决我的问题，但最后我要做的就是改变我从100％延伸到比面板更大的固定高度的面板的高度。
<asp:Panel ID="pnlUploader" Width="500px"...
我也在小组外面有我的扩展器，但怀疑这是否重要。 AjaxControlToolkit不是最喜欢的！
答案 5 :(得分：0)
ModalPopupExtender将Panel显示为PopupControlId，其中心位于您声明为Panel的div中。因此，请尝试将ModalPopupExtender保留在您定义的位置，并从其容器中移出弹出窗口Panel（即使在UpdatePanel之外）。它对我有用。
答案 6 :(得分：0)
#ModalPopUp
{
Position:relative;
Height:400px;
Width:400px;
Margin-left:auto;
Margin-right:auto;
}
这应该将弹出窗口置于页面的中心。然后只需为modalbackground设置CSS，你就可以了。
汤姆
答案 7 :(得分：0)
我使用了它，效果很好。 您要寻找的位置是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>
答案 8 :(得分：-1)
希望这可以通过两种方式实现。
CSS：
.hcenter{margin:0 auto; width:200;} /* I have given a sample width you give the width of your popup */
代码：
<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" />
...
答案 9 :(得分：-1)
.panel
{
position: absolute;
top: 50%;
left:50%;
}
<asp:Panel id ="pnlUploader" CssClass="panel">
答案 10 :(得分：-1)
默认情况下，删除参数x，y和repositio nmode，滚动时也会占据中心位置。