0

Can the jQuery Mobile pop-up box display over a div and be centered to the window if a user taps on the link after having scrolled down a little?

Here is a fiddle to see what I have so far. http://jsfiddle.net/c5Cqm/

I am using the silentScroll method to scroll the page back to the top of the targeted element. The popup box should be centered to the window, but if a user has scrolled down a little than we want to scroll back up to the green div in the fiddle and then display the popup box in the center of the window.

If you scroll down so that "Link 2" is at the very top of the window and then click it, the popup box will appear below the green div instead of over the green div and centered in the window.

Here is my HTML using jQuery Mobile:

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

2 回答 2

1

我相信这就是您正在寻找的。

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

我拿出你的

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

从锚标记内并使用 Jquery 的 .click 函数通过添加滚动

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

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

于 2013-07-10T17:19:03.690 回答
0

尝试使用 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>
于 2013-07-10T17:17:25.120 回答