Question

如果用户在向下滚动一点后点击链接，jQuery Mobile弹出框是否可以显示在div上并以窗口为中心？

这是一个小提琴，看看到目前为止我有什么。 http://jsfiddle.net/c5Cqm/

我使用silentScroll方法将页面滚动回目标元素的顶部。弹出框应该以窗口为中心，但是如果用户向下滚动了一点，我们想要向后滚动到小提琴中的绿色div，然后在窗口中央显示弹出框。

如果向下滚动以使“Link 2”位于窗口的最顶部然后单击它，则弹出框将显示在绿色div下方，而不是绿色div上方，并在窗口中居中。

这是我使用jQuery Mobile的HTML：

<div class="main">
  <div class="contentBlock">
    <p><a class="pop" onclick="$.mobile.silentScroll($('.contentBlock'))" href="#popup-1" data-rel="popup" data-position-to="window">Link 1</a></p>
    <p><a class="pop" onclick="$.mobile.silentScroll($('.contentBlock'))" href="#popup-2" data-rel="popup" data-position-to="window">Link 2</a></p>
  </div>
</div>

<div data-role="popup" id="popup-1">
  <p>content in popup 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lectus vehicula, lacinia nisl in, laoreet metus. Donec vel odio lacus. Quisque tristique ligula sed cursus congue. </p>
</div>
<div data-role="popup" id="popup-2">
  <p>content in popup 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lectus vehicula, lacinia nisl in, laoreet metus. Donec vel odio lacus. Quisque tristique ligula sed cursus congue. </p>
</div>

Answer 1

我相信这就是你要找的东西。

http://jsfiddle.net/SteveRobertson/b3LfN/4/

我拿出你的

  onclick="$.mobile.silentScroll($('.contentBlock'))"

从锚标记中

并使用Jquery的.click函数通过添加

滚动

  $('#target').click( function() { document.getElementById("target").scrollIntoView(true);
                              } );

这样，滚动到目标对象后，您将获得窗口位置。

Answer 2

尝试使用data-position-to ='body'

http://jsfiddle.net/2egjs/

，如

<a class="pop" onclick="$.mobile.silentScroll($('.contentBlock'))" href="#popup-2" data-rel="popup" data-position-to="body">Link 2</a>

用户滚动后的jQuery Mobile Popup位置

2 个答案: