[ACCEPTED]-Positioning AJAX ModalPopupExtender in the center of the screen problem-modalpopupextender

Modal popup panel is given an absolute position. So 12 it needs to be inside an element which has 11 a non-static position. In this case, I want it to be centred 10 on the page, so I have put it inside an 9 element (in this case an UpdatePanel but 8 it doesn't matter what kind of element it 7 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 6 the original question is quite old, but 5 I spent a lot of time looking for the answer 4 to this problem without finding it, and 3 this question is comes up quite highly on 2 Google, so hopefully this will save someone 1 else some time.

Use the x and y attributes of the ModalPopupExtender.

0

I know this is old, but no answer yet ... so 3 its ok?

Anyway ... make sure the panel is 2 separated from the main page div/panel. It's 1 using that as the window to set position.

I know that this is a very old question, but 9 as also got here looking for a solution, I 8 thought I may post how I finally solved 7 the issue, to help others.

Just use that 6 style in your panel:

<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />

The "important" clause 5 will override all other settings from the 4 modalpopupextender. The percentages are 3 taken from twitter bootstrap as a standard. "display" also 2 will prevent your panel to show while loading 1 the page.

This took me frickin ages to work out for 6 my case, but in the end all I had to do 5 was to change the height of the panel I 4 was extending from 100% to a fixed height 3 bigger than the panel.

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

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

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

Good luck.

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

This should position your popup in the center 2 of your page. Then just set the CSS for 1 the modalbackground and you should be fine.

Tom

I used this and it's working great. The 4 spot you looking for is X="100" Y="100". It 3 give fixed position and the popupDragHandleControlID 2 give you the possibility to drag your window 1 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>