Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

can't position Modal Popup

$
0
0

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.


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>