html - 叠加在 jQuery Mobile 中方向变化的位置

Question

我正在研究 jQuery 移动版。我有一个叠加层，它会在点击标题中的按钮时弹出。叠加层出现在按钮附近。

<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Photos</h1>
    <a href="#photomenu" data-icon="gear" data-iconpos="notext"
   data-rel="popup" data-transition="slidedown"></a>
 </div>

但是在方向改变时，叠加层出现在中心。如何在方向变化时保留叠加层的位置？感谢您的帮助。

Answer 1

默认情况下，弹出窗口在您单击的内容(原点)上垂直和水平居中打开，这对于用作工具提示或菜单的弹出窗口很有用。该框架还应用了一些基本的碰撞检测规则来确保弹出窗口出现在屏幕上，因此最终位置可能不会总是以原点为中心。

对于对话框或灯箱之类的情况，弹出窗口应显示在窗口的中心而不是原点上方，请将 data-position-to 属性添加到链接并指定 window 的值。

除了 origin 和 window 之外，还可以将任何有效的选择器指定为 position-to 的值。例如，如果您添加 data-position-to="#myElement"，弹出窗口将定位在 ID 为 myElement 的元素上。

<a href="#positionWindow" data-rel="popup" data-position-to="window">Position to window</a>

<div data-role="popup" id="positionWindow">
    <p>I am positioned to the window.</p>
</div>

我还为您制作了一个实时的 jsfiddle 示例:http://jsfiddle.net/Gajotres/8xCYB/