jquery mobile image Popup中的对齐问题

Posted 2023-05-09

【中文标题】jquery mobile image Popup中的对齐问题

【英文标题】：Alignment Issue in jquery mobile image Popup

【发布时间】：2014-12-18 19:14:41

【问题描述】：

我有一个 ID 为 popupBasic 的 div，用于 Jquery Mobile 中的弹出窗口

<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 将存储在本地存储中。 点击查看按钮时，将imgView的src设置为localstorage中的值 调用弹窗（“打开”）

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

我做错了什么？

提前致谢

【参考方案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。