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:0;left:0;"><asp:UpdatePanel runat="server" ID="upnlZoom" RenderMode="Inline"><ContentTemplate><asp:Panel runat="server" ID="pnlZoom" style="position:fixed;top:0;left:0;text-align:center;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 pop up at left:200px, top:100px.