CSS 将 AJAX ModalPopupExtender 定位在屏幕中心问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1347632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning AJAX ModalPopupExtender in the center of the screen problem
提问by dani
I have problem with positioning ModalPopupExtender in the center of the screen when it's PopupDragHandleControlID property is set (without this property it works fine ).
当设置了 PopupDragHandleControlID 属性时，我在将 ModalPopupExtender 定位在屏幕中央时遇到问题（没有这个属性它工作正常）。
ModalPopupExtender is not positioned in the center of the screen. I thinks what causes the problem is the page's CSS layout cause when i disable it, popup positioned in the center of the screen (I don't understand why page's css affects ModalPopupExtender only when it's PopupDragHandleControlID property is set )
ModalPopupExtender 未位于屏幕中央。我认为导致问题的原因是页面的 CSS 布局原因，当我禁用它时，弹出窗口位于屏幕中央（我不明白为什么页面的 css 仅在设置了 PopupDragHandleControlID 属性时才会影响 ModalPopupExtender）
Thepage:
这一页：
<!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>
The CSS:
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;
}
回答by lucyconnuk
Modal popup panel is given an absoluteposition. So it needs to be inside an element which has a non-static position. In this case, I want it to be centred on the page, so I have put it inside an element (in this case an UpdatePanel but it doesn't matter what kind of element it is) which has an inline style of position:fixed;left:0;top:0.
模态弹出面板被赋予一个绝对位置。因此它需要位于具有非静态 position的元素内。在这种情况下，我希望它以页面为中心，所以我把它放在一个元素中（在这种情况下是一个 UpdatePanel，但它是什么类型的元素并不重要），它具有位置的内联样式：固定;left:0;top: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>
I know the original question is quite old, but I spent a lot of time looking for the answer to this problem without finding it, and this question is comes up quite highly on Google, so hopefully this will save someone else some time.
我知道最初的问题已经很老了，但是我花了很多时间寻找这个问题的答案却没有找到，而且这个问题在 Google 上的出现率很高，所以希望这会为其他人节省一些时间。
回答by Xs10tial
Use the x and y attributes of the ModalPopupExtender.
使用 ModalPopupExtender 的 x 和 y 属性。
回答by Greg
I know this is old, but no answer yet ... so its ok?
我知道这是旧的，但还没有答案......所以可以吗？
Anyway ... make sure the panel is separated from the main page div/panel. It's using that as the window to set position.
无论如何......确保面板与主页div /面板分开。它使用它作为设置位置的窗口。
回答by Sergio
I know that this is a very old question, but as also got here looking for a solution, I thought I may post how I finally solved the issue, to help others.
我知道这是一个非常古老的问题，但也在这里寻找解决方案，我想我可以发布我最终如何解决这个问题，以帮助其他人。
Just use that style in your panel:
只需在您的面板中使用该样式：
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />
The "important" clause will override all other settings from the modalpopupextender. The percentages are taken from twitter bootstrap as a standard. "display" also will prevent your panel to show while loading the page.
“重要”子句将覆盖 modalpopupextender 中的所有其他设置。百分比取自 twitter bootstrap 作为标准。“显示”还会阻止您的面板在加载页面时显示。
回答by Olivier Lachance
I used this and it's working great. The spot you looking for is X="100" Y="100". It give fixed position and the popupDragHandleControlID give you the possibility to drag your window as you wish. Here the solution
我用过这个，效果很好。您要查找的位置是 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>
回答by adripanico
The ModalPopupExtendershows the Panelgiven as PopupControlIdcentered inside the div you declared the Panel. So try keeping the ModalPopupExtenderwhere you defined it, and moving out the popup Panelfrom its containers (even out of the UpdatePanel). It works for me.
在ModalPopupExtender该节目Panel给出PopupControlId你声明的股利的正中央Panel。因此，请尝试保留ModalPopupExtender您定义它的位置，并将弹出窗口Panel从其容器中移出（甚至移出UpdatePanel）。这个对我有用。
Good luck.
祝你好运。
回答by Hardgraf
#ModalPopUp
{
Position:relative;
Height:400px;
Width:400px;
Margin-left:auto;
Margin-right:auto;
}
This should position your popup in the center of your page. Then just set the CSS for the modalbackground and you should be fine.
这应该将您的弹出窗口放置在页面的中心。然后只需为 modalbackground 设置 CSS 就可以了。
Tom
汤姆
回答by JumpingJezza
This took me frickin ages to work out for my case, but in the end all I had to do was to change the height of the panel I was extending from 100% to a fixed height bigger than the panel.
这让我花了很长时间来解决我的案例，但最后我所要做的就是改变面板的高度，我从 100% 延伸到比面板大的固定高度。
<asp:Panel ID="pnlUploader" Width="500px"...
I also had my extender outside the panel but doubt if that matters. AjaxControlToolkit not a favourite!
我在面板外也有我的扩展器，但我怀疑这是否重要。AjaxControlToolkit 不是我的最爱！
回答by Aca
.panel
{
position: absolute;
top: 50%;
left:50%;
}
<asp:Panel id ="pnlUploader" CssClass="panel">
回答by Logesh Paul
Hope this can be achieved by two ways.
希望这可以通过两种方式实现。
- Write a css class property like below and call the class name in the ModalPopupExtender.
- 编写如下所示的 css 类属性，并在 ModalPopupExtender 中调用类名。
CSS:
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" />
...
...
- Try HorizontalOffset property in panel.
- 在面板中尝试 HorizontalOffset 属性。
