Question

我正在尝试将移动视口的jquery对话框中心专门设置为iphone的safari，但是当用户尝试放大页面时，对话框会在页面的右下方移动，这使得它不再可见。< / p>

以下是代码：

//-- 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的浏览器中非常有效，但对于移动设备，它只适用于缩小页面的时候。

知道该怎么做吗？

Answer 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文件中定义的默认值。

放大/缩小时，将jquery对话框保留在移动视口的中心？

1 个答案: