将AJAX ModalPopupExtender定位在屏幕问题的中心。
将AJAX ModalPopupExtender定位在屏幕问题的中心。
提问于 2009-08-28 15:10:45
当设置了ModalPopupExtender的PopupDragHandleControlID属性时，我在将它定位在屏幕中央时遇到了问题(没有这个属性，它可以很好地工作)。
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;
}回答 9
Stack Overflow用户
发布于 2011-05-05 00:14:07
使用ModalPopupExtender的x和y属性。
Stack Overflow用户
发布于 2012-09-26 06:53:43
我知道这很陈旧，但还没有答案...所以没问题吧？
不管怎样..。确保面板与主页div/panel分开。它将其用作设置位置的窗口。
Stack Overflow用户
发布于 2013-11-27 20:04:35
我知道这是一个非常古老的问题，但也是为了寻找解决方案，我想我可能会发布我是如何最终解决这个问题的，以帮助其他人。
只需在您的面板中使用该样式：
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />"important“子句将覆盖modalpopupextender中的所有其他设置。百分比取自twitter bootstrap作为标准。"display“还将阻止您的面板在加载页面时显示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1347632
复制相关文章
相似问题