用户滚动后的jQuery手机弹出窗口位置

Question

如果用户在稍微向下滚动后点击链接，jQuery手机弹出框是否可以显示在div上并居中到窗口？

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

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

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

这是我使用jQuery手机的超文本标记语言：

<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>