Positioning AJAX ModalPopupExtender in the center of the screen problem

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.

Use the x and y attributes of the ModalPopupExtender.

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.