Can't position Modal Popup

Question

I am trying to open a modal pop up in response to click on an image. The modal pop up will display a zoomed in version of the image. It keeps displaying the pop up in the center of the screen no matter what I do to position it differently. I tried to put the update panel inside a div, no change. For the images, I have a javascript onclick event:

onclick = "fnZoomImage(this.src)"

The js functions are:

function fnZoomImage(imageUrl) {
    var imgZoom = document.getElementById("imgZoom");
    imgZoom.src = imageUrl.replace("WebVersion/", "");
    imgZoom.style.display = "block";
    var modalpopup = $find('mpeZoom'); 
    modalpopup.show();
    return false;
}

function HideImage() {
    var imgZoom = document.getElementById("imgZoom");
    imgZoom.style.display = "none";
    var modalpopup = $find('mpeZoom'); 
    modalpopup.hide();
}

Pop up extender is:

<div style="position:fixed;top:100;left:200;">
<asp:UpdatePanel runat="server" ID="upnlZoom" RenderMode="Inline">
    <ContentTemplate>
        <asp:Panel runat="server" ID="pnlZoom" style="position:fixed;top:100;left:200;border:solid 2px navy;display:none;">
            <img id="imgZoom" style="display: none;" />
            <input type="button" id="btnClose" value="Close" onclick="HideImage()" style="width:75px;" />
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="mpeZoom" BehaviorID="mpeZoom" runat="server" TargetControlID="btnFake" BackgroundCssClass="backgrondModal" DropShadow="true" PopupControlID="pnlZoom" PopupDragHandleControlID="pnlZoom" />
        <asp:Button runat="server" ID="btnFake" Style="display:none" /> 
    </ContentTemplate>
</asp:UpdatePanel>
</div>

I am trying to position the popup at left:200px,top:100px.

Answer 1

Set your left and top position for the popup through the set_X and set_Y properties like below and remove the style (position, left and top) you set for the panel pnlZoom and the div above the Update Panel.

modalpopup.set_X(200);
modalpopup.set_Y(100);
modalpopup.show();

UPDATE 1: Based on you comment, if you want to display the modal popup relative to the position of the control triggering the click then do as follows. You can use Sys.UI.DomElement.getLocation method to get the offset of the control.

Change your onclick to pass this to reference the img/button object

 onclick = "fnZoomImage(this, this.src)"

and your fnZoomImage function will become

function fnZoomImage(obj, imageUrl) {
     .....
     .....
     var location = Sys.UI.DomElement.getLocation(obj);
     var xPos = location.x;
     var yPos = location.y;

     xPos = xPos - 200; // adjust the value accordingly
     yPos = yPos + obj.offsetHeight; 

     modalpopup.set_X(xPos);
     modalpopup.set_Y(yPos);
     modalpopup.show();
     .....
     .....
}