Question

我遇到这个问题，当我点击按钮打开弹出窗口时页面滚动到顶部。

所以，如果我向下滚动页面到底部，有一个按钮“提交”，点击后会打开一个弹出窗口，该窗口应该在屏幕中央打开。但是一旦提交了＃39;单击，页面向上滚动到顶部，这使得弹出窗口不可见（弹出窗口在滚动到顶部之前位于旧页面的中心）。更重要的是，如果我向下滚动页面，请关闭弹出窗口，点击“提交”。再次，页面将不会滚动到顶部，弹出窗口确实位于窗口的中心。只有在第一次点击按钮时，页面才会自动滚动到顶部。

我希望弹出窗口始终保持在屏幕的中心，我使用data-position-to="window"来实现这一点。我相信它不在中心的原因是页面本身滚动到顶部。想知道我该怎么做才能解决这个问题？

这是我的弹出窗口：

<div data-role="popup" id="feedbackValidationError" data-position-to="window" data-dismissible="false" data-history="false" data-overlay-theme="a" data-transition="slidedown" class="ui-corner-all">
        <div data-role="header" data-theme="a">
            <h1 class="center">Form Error</h1>
        </div>
        <div data-role="content" class="ui-corner-bottom ui-content popupPadding">
            <p>Please answer to at least one of the questions</p>
            <a href="#" data-role="button" id="feedbackValidationErrorButton">OK</a>
        </div>
</div>

我用来打开弹出窗口的代码：

$("#feedbackValidationError").popup("open");

并关闭弹出窗口：

 $(document).on('pageinit', '#FeedbackEnter',
     function () {
         $("#feedbackValidationErrorButton").on("click", 
             function () {
                  $("#feedbackValidationError").popup("close");
             }
         );
      }
 );

Answer 1

我认为这是您试图在问题中描述的行为。 https://jsfiddle.net/5mrybr1v/3/

要解决此问题，您可以在滚动后显示popUp。

window.scrollTo(0,0); $("#feedbackValidationError").popup("open");

https://jsfiddle.net/5mrybr1v/4/

Answer 2

您可以使用CSS来处理此问题。 sudo apt-get purge maven maven2 maven3 sudo add-apt-repository ppa:andrei-pozolotin/maven3 sudo apt-get update sudo apt-get install maven3会将元素固定在窗口而不是文档中的位置。

小提琴：http://jsfiddle.net/vLeh24z1/1/

无论你在哪里滚动，它都会保持在相同的位置。

position: fixed

由于背景页面滚动回顶部，弹出窗口不能停留在屏幕中心

2 个答案: