17

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

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 )

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:

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

18

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.

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

4
  • 3
    Awesome solution! solved for me (I used a div instead of UpdatePanel) Apr 29, 2013 at 10:01
  • Thanks for this one! Works perfect! This answer should be marked as solved!
    – Haris
    Nov 4, 2013 at 8:16
  • awesome. still work like magic. however, updatepanel didn't do a vertical-center for me, I ended up using a div.
    – RealSollyM
    Aug 30, 2014 at 10:28
  • 2
    Perfect, thank you. I hope OP someday marks this as the answer. Here's what I did with this solution: a div with a class, right after the "form" and Ajax ToolkitScriptManager tags, with the styles "display: block; position: absolute; top: 0px; left: 0px; z-index: 500;". Change the z-index do anything higher than your other page elements, but lower than your modal message styles.
    – John Suit
    Oct 24, 2014 at 16:42
6

Use the x and y attributes of the ModalPopupExtender.

2
  • This was exactly what I needed! Thanks @Xs10tial!
    – MikeC
    Sep 10, 2014 at 15:25
  • The x and y solution worked for me!
    – AV2000
    Mar 11, 2022 at 23:16
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.

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.

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.

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

I also had my extender outside the panel but doubt if that matters. AjaxControlToolkit not a favourite!

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.

Good luck.

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.

Tom

0

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

<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

Hope this can be achieved by two ways.

  • Write a css class property like below and call the class name in the ModalPopupExtender.

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.
1
  • 1
    it didn't help. And there is only HorizontalAlign property and it's for panel's content.
    – dani
    Aug 29, 2009 at 14:12
-1
.panel 
{
    position: absolute;
    top: 50%;
    left:50%;
}


<asp:Panel id ="pnlUploader" CssClass="panel">
0
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.