Question

我在Jquery Mobile中有一个id popupBasic 的div用于弹出

<div data-role="popup" id="popupBasic">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img id="imgView" />
</div>

要打开按钮上的弹出窗口，请单击 btnViewPopup 以下代码。

function btnViewPopup() {
    try {
        if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined") {
            Notify(22);
        }
        else {
            var source = localStorage.imageURL
            $("#imgView").attr('src', source);
            $("#popupBasic").popup("open");
        }
    }
    catch (err) {
    ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
    }
}

当前实施

图片列表有一个单选按钮列表。
如果选择一个，其图像URL将存储在本地存储中。
点击查看按钮时，使用localstorage中的值

imgView

src

致电Popup（“打开”）

我的问题是第一次单击“查看”按钮时，显示的图像很小，并且它与中间右对齐。下次当我打开另一个或相同的图像时，它正如我预期的那样显示完整。我没有给出图像的高度和宽度，因为不同的图像可能会有所不同。

我做错了什么？

提前致谢

Answer 1

在了解图像尺寸之前，您的弹出窗口正在显示。您可以在加载图像后打开弹出窗口，如下所示：

<强> CSS：

#imgView
{
    width: 100%;
    height: 100%;
}

<强> JS：

function btnViewPopup() {
    localStorage.imageURL = 'http://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/themes.jpg';

    try {
        if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined") {
            Notify(22);
        }
        else {
            var source = localStorage.imageURL;
            $("#imgView").attr('src', source);

            $("#imgView").one("load", function() {
                $("#popupBasic").popup("open");
            }).each(function() {
                if (this.complete) {
                    $(this).load();
                }
            });
        }
    }
    catch (err) {
        ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
    }
}

这是DEMO。

jquery移动图像弹出中的对齐问题

1 个答案: