jquery mobile image Popup中的对齐问题

Posted

技术标签:

【中文标题】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 将存储在本地存储中。 点击查看按钮时,将imgViewsrc设置为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。

【讨论】:

以上是关于jquery mobile image Popup中的对齐问题的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile Popup 和 ListView,以及 Popup div 内的 Knockout.js 数据绑定 - 不工作

jquery mobile popup,需要点击两次才能关闭

如何在 jQuery Mobile 中等待弹出窗口关闭?

jquery mobile popup - 按钮样式不正确,data-iconpos =“notext”,以及其他问题

jquery mobile 弹出关闭按钮 - 如何关闭而不返回?

我在哪里存储 jQuery Mobile 弹出窗口的 div