1

我正在使用 jQuery 手机。在我的网页中，我创建了一个以数据角色为标题的 div。在这里面，有一个图像。
现在，我创建了另一个带有数据角色弹出窗口的 div。当页面加载时，带有角色弹出窗口的 div 按预期隐藏。
当用户单击图像时，预计会显示弹出窗口。
确实如此。问题是它以与标题重叠的方式显示，并紧挨在触发弹出窗口的图像下方。

我通过将以下选项传递给图像选择器来调用弹出方法

$("#navBar").popup("open", {  
    x: 0,  
    y: 50,  
    transition: "reverse slide"  
});

这不能解决问题。相反，弹出窗口立即显示在触发它的图像下方。如果删除了 X 和 Y 选项，则弹出窗口将显示在窗口的中心。

更多信息 - 这是 jquery mobile 准备的代码： 

<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0">

这里可以看到jQuery Mobile添加了top=30px和left=15px的样式。
为了满足我的需求，我想要 top=40px 和 left=0px。我想在不覆盖基本 CSS 的情况下做到这一点。我希望传递给该popup()方法的 X 和 Y 选项可以解决问题，但它们不起作用！有助于理解的问题
图像。

4

1 回答 1

2

默认情况下，弹出窗口尝试直接定位在打开它的元素的顶部，如果您使用 API 执行此操作并指定 x 和 y，它将尝试在给定坐标处居中弹出窗口。但是为了避免弹出显示屏幕，jquery mobile 还强制在弹出对话框和屏幕边缘之间进行填充，默认情况下，这些填充边距是垂直 30 和水平 15。所以你的小狗被定位的原因是由于这些公差。

要将弹出窗口定位到您想要的精确 x 和 y，您需要将弹出窗口宽度的一半添加到所需的 x，并将弹出窗口高度的一半添加到所需的 y。

于 2013-07-14T16:23:23.223 回答