2

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

}
});
4

0 回答 0