4

モバイル ビューポートの jquery ダイアログ センター、特に iphone のサファリを作成しようとしていますが、ユーザーがページをズームインしようとすると、ダイアログがページの右下に移動し、表示されなくなります。

コードは次のとおりです。

//-- The dialog
$("#dialog").dialog({
    modal:true,
    draggable:true,
    resizable:false,
    width:650,
    height:330,
    cache:false,
    position:'center'
}); 

//-- Make dialog center when page resize 
$(window).resize(function() {
    $(".ui-dialog-content").dialog("option", "position", "center");
});

これは PC のブラウザでは完全に機能しますが、モバイルではページが縮小されている場合にのみ機能します。

それを行う方法はありますか？

4

1 に答える 1

1

jQueryUI の問題のようです。

次のような CSS の代替案を試しましたか。

JS

$("#dialog").dialog({
    modal:true,
    draggable:true,
    resizable:false,
    width:650,
    height:330
});

CSS

.ui-dialog {
    left: 50% !important;
    top: 50% !important;
    margin-left: -325px !important; // half 650
    margin-top: -165px !important; // half 330
}

!important を使用して、jQueryUI CSS ファイルで定義されている既定値をオーバーライドしました。

于 2013-10-14T10:30:45.843 に答える