无法在jquery mobile中定位弹出窗口

Question

我正在使用jQuery mobile。在我的网页中，我创建了一个以数据角色为标题的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选项能够解决这个问题，但它们无法正常工作！
问题的Image有助于理解。

Answer 1

默认情况下，

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

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