我在将jQuery Mobile弹出窗口居中时遇到一个令人困惑的问题。当我第一次单击它时,它没有居中并显示在页面的角落。关闭并重新打开后,它突然居中。
这是我的代码:
$(document).on("pageshow",function(){
$('.image_link').on('click', function(event){
var id = $(this).children('img').attr("id");
$("#show_image_img").attr("src",sPath + "/view/images/" + id);
$("#show_image").popup('open');
$("#show_image" ).popup({ positionTo: "window" });
});
});
这是我的html代码
<div data-role="popup" id="show_image" data-theme="c" class="ui-corner-all">
<div style="padding:20px 30px;">
<img id="show_image_img" src="" />
</div>
</div>
有人知道如何解决这个问题吗?我已经尝试过各种方法,例如将pageshow
事件更改为apagebeforeshow
等。
我相信在完全单击图像之前,首先单击该弹出窗口即已加载,因此它不知道用于定位的大小。因此,左上角居中。
如果您提前知道图片大小,则可以通过CSS在弹出窗口中预先设置IMG标签的大小
如果页面上没有太多图像,则可以尝试预加载它们
您还可以在弹出窗口上添加一个小的setTimeout延迟,以使图像下载完成:
$(document).on("pageshow", function () {
$('.image_link').on('click', function (event) {
$("#show_image_img").attr("src", "http://www.aai.ee/planets/nineplanets/gif/SmallWorlds.jpg");
setTimeout(OpenPopup, 50);
});
});
function OpenPopup(){
$("#show_image").popup({ positionTo: "window" }).popup('open');
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句