在屏幕中央定位AJAX ModalPopupExtender的问题

17

我的问题是当设置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;
}
11个回答

18

模态弹出面板被赋予了绝对定位。因此,它需要位于具有非静态定位的元素内部。在这种情况下,我希望它在页面中居中,所以我将它放在了一个具有行内样式position:fixed;left:0;top:0的元素内(在这种情况下,是一个UpdatePanel,但是它可以是任何类型的元素)。

<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>

我知道原问题已经相当古老了,但我花费了很多时间寻找答案,却没有找到。而且这个问题在谷歌上排名相当高,所以希望这篇回答能够为其他人节省一些时间。


3
太棒了!对我有用(我使用了 div 代替 UpdatePanel)。 - Emanuele Greco
谢谢您提供这个!运行得非常完美!该回答应该标记为已解决! - Haris
太棒了,仍然像魔法一样工作。但是,UpdatePanel对我来说没有垂直居中,最终我使用了一个div。 - RealSollyM
2
完美,谢谢。我希望OP有一天会将这个标记为答案。这是我使用此解决方案的方法:在“表单”和Ajax ToolkitScriptManager标记之后,添加一个具有类的div,并使用样式"display: block; position: absolute; top: 0px; left: 0px; z-index: 500;"。将z-index更改为任何高于其他页面元素但低于模态消息样式的值即可。 - John Suit

6
使用ModalPopupExtender的x和y属性。

这正是我所需要的!谢谢 @Xs10tial! - MikeC
x和y的解决方案对我起作用了! - AV2000

1
我知道这是一个非常老的问题,但是因为我也在寻找解决方案,所以我想发帖说明我最终如何解决这个问题,以帮助其他人。
只需在您的面板中使用该样式即可:
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />

“important”子句将覆盖modalpopupextender的所有其他设置。百分比采用Twitter Bootstrap作为标准。 “display”也会在页面加载时防止面板显示。

1

我知道这个问题有点老了,但还没有答案...所以没关系吧?

无论如何...请确保面板与主页面的div/面板分离。它使用该窗口来设置位置。


0
#ModalPopUp
 {
    Position:relative;
    Height:400px;
    Width:400px;
    Margin-left:auto;
    Margin-right:auto;
  }

这应该将您的弹出窗口定位在页面中心。然后只需设置模态背景的CSS,您就可以了。

汤姆


0

这对我来说花了很长时间才解决了我的问题,但最终我所要做的就是将我扩展的面板的高度从100%更改为大于面板的固定高度。

<asp:Panel ID="pnlUploader" Width="500px"...

我也把我的扩展器放在面板外面,但不确定是否有影响。AjaxControlToolkit 不是我的最爱!


0

ModalPopupExtender 显示以 PopupControlId 为参数的 Panel 在声明 Panel 的 div 中居中。因此,请尝试将 ModalPopupExtender 放在定义它的位置,并将弹出窗口的 Panel 移出其容器(甚至移出 UpdatePanel)。这对我很有效。

祝你好运。


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>

-1
希望可以通过两种方式实现。
1、编写如下的css类属性,并在ModalPopupExtender中调用该类名。 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"   />

...

  • 尝试在面板中使用HorizontalOffset属性。

1
它没有帮助。 并且只有HorizontalAlign属性,它是用于面板内容的。 - dani

-1
.panel 
{
    position: absolute;
    top: 50%;
    left:50%;
}


<asp:Panel id ="pnlUploader" CssClass="panel">

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接