将AJAX ModalPopupExtender定位在屏幕问题的中心

时间：2021-11-24 03:17:37

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:

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

10 个解决方案

#1

15  

Modal popup panel is given an absolute position. 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.

模态弹出面板给出一个绝对位置。所以它需要在一个非静态位置的元素里面。在本例中，我希望它以页面为中心，因此我将它放在一个元素(在本例中是UpdatePanel，但它是什么类型的元素)中，该元素具有内联的位置样式:fixed;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.

我知道最初的问题已经很老了，但是我花了很多时间寻找这个问题的答案却没有找到它，这个问题在谷歌上出现的频率很高，所以我希望这能给其他人一些时间。

#2

5  

Use the x and y attributes of the ModalPopupExtender.

使用ModalPopupExtender的x和y属性。

#3

1  

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/面板分开。它用这个窗口来设置位置。

#4

1  

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引导程序中抽取的。“display”也会阻止您的面板在加载页面时显示。

#5

0  

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不是最喜欢的!

#6

0  

The ModalPopupExtender shows the Panel given as PopupControlId centered inside the div you declared the Panel. So try keeping the ModalPopupExtender where you defined it, and moving out the popup Panel from its containers (even out of the UpdatePanel). It works for me.

ModalPopupExtender显示了以PopupControlId形式给出的面板，该面板位于您声明的div中。因此，请将ModalPopupExtender保存在定义它的位置，并将弹出面板从容器中移出(甚至从UpdatePanel中移出)。它适合我。

Good luck.

祝你好运。

#7

0  

#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

汤姆

#8

-1  

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属性。

#9

-1  

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


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

#10

-1  

Remove Parameter x, y and repositio nmode by default it takes center position also when you scroll.

删除参数x, y和复位nmode默认情况下，当你滚动时，它也会占据中心位置。

#1

15  

Modal popup panel is given an absolute position. 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.

模态弹出面板给出一个绝对位置。所以它需要在一个非静态位置的元素里面。在本例中，我希望它以页面为中心，因此我将它放在一个元素(在本例中是UpdatePanel，但它是什么类型的元素)中，该元素具有内联的位置样式:fixed;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.

我知道最初的问题已经很老了，但是我花了很多时间寻找这个问题的答案却没有找到它，这个问题在谷歌上出现的频率很高，所以我希望这能给其他人一些时间。

#2

5  

Use the x and y attributes of the ModalPopupExtender.

使用ModalPopupExtender的x和y属性。

#3

1  

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/面板分开。它用这个窗口来设置位置。

#4

1  

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引导程序中抽取的。“display”也会阻止您的面板在加载页面时显示。

#5

0  

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不是最喜欢的!

#6

0  

The ModalPopupExtender shows the Panel given as PopupControlId centered inside the div you declared the Panel. So try keeping the ModalPopupExtender where you defined it, and moving out the popup Panel from its containers (even out of the UpdatePanel). It works for me.

ModalPopupExtender显示了以PopupControlId形式给出的面板，该面板位于您声明的div中。因此，请将ModalPopupExtender保存在定义它的位置，并将弹出面板从容器中移出(甚至从UpdatePanel中移出)。它适合我。

Good luck.

祝你好运。

#7

0  

#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

汤姆

#8

-1  

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属性。

#9

-1  

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


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

#10

-1  

Remove Parameter x, y and repositio nmode by default it takes center position also when you scroll.

删除参数x, y和复位nmode默认情况下，当你滚动时，它也会占据中心位置。

标签：

相关文章