Question

我正在尝试打开模式弹出以响应单击图像。模态弹出窗口将显示图像的放大版本。无论我做什么，它都会不断地在屏幕中央显示弹出窗口。我试图将更新面板放在div中，没有变化。对于图像，我有一个javascript onclick事件：

onclick = "fnZoomImage(this.src)"

js函数是：

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();
}

弹出扩展器是：

<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>

我试图将弹出窗口放在左边：200px，top：100px。

Answer 1

通过下面的set_X和set_Y属性设置弹出窗口的左侧和顶部位置，并移除您为面板pnlZoom设置的样式（位置，左侧和顶部），更新面板上方的div。

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

更新1：根据您的评论，如果要显示相对于触发点击的控件位置的模态弹出窗口，请按以下步骤操作。您可以使用Sys.UI.DomElement.getLocation方法获取控件的偏移量。

更改您的onclick以传递this以引用img / button对象

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

，您的fnZoomImage功能将变为

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();
     .....
     .....
}

无法定位Modal Popup

1 个答案: