我有一个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%");
}
});