Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intended.
The strange thing is that after the initial scroll to the top glitch, if I close the popup, try again, the page doesn't scroll up, and the popup works perfectly. This inconsistency is driving me crazy!
To keep the popup centered on the screen at all times, I tried using data-position-to="window" without success. I suspect the scrolling issue is causing the problem. Any suggestions on how to fix this?
Here is the code for my popup:
<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>
Code used to open the popup:
$("#feedbackValidationError").popup("open");
Code for closing the popup:
$(document).on('pageinit', '#FeedbackEnter',
function () {
$("#feedbackValidationErrorButton").on("click",
function () {
$("#feedbackValidationError").popup("close");
}
);
}
);