jquery移动弹出窗口改变位置变化的位置 - iPad

Question

我有一个jQuery Mobile弹出窗口，当应用程序打开时会打开该窗口。在初始加载时，我将弹出窗口放在div中，该div位于屏幕底部的中心位置。

我希望这个弹出窗口位于屏幕底部靠近任何iPad方向。但是当我将屏幕变为纵向然后再返回横向时，弹出窗口会移动到屏幕的中心。

我尝试了一些用jQuery重置位置的方法，并添加了一些媒体查询css，但到目前为止似乎没有任何工作。我的代码如下，感谢您的帮助。

HTML：

<div id="popupContainer">
    <div data-role="popup" id="disclaimer" data-position-to="#popupContainer"  data-transition="fade" data-history="false">
        <p><span id="infoText">some texthere.</span></p>
    </div>
</div>

的CSS：

#popupContainer{
width: 450px;
display: block;
position: relative;
margin-left:auto; margin-right:auto;
top:80%;
z-index: 10;
}
#disclaimer{
max-width: 450px;   
}

JS：

$( window ).on( "orientationchange", function( e ) {
if (window.orientation === 0 || window.orientation === 180)
{
    $("#disclaimer").popup( "reposition", { positionTo: "#popupContainer"});
        $("#popupContainer").css("top", "60%");
}
if (window.orientation === 90 || window.orientation === -90)
{
    $("#disclaimer").popup(  "reposition", {positionTo: "#popupContainer"});
    $("#popupContainer").css("top", "80%");

}
});