0

ユーザーが少し下にスクロールした後にリンクをタップすると、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>
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 に答える