放大/缩小时将jquery对话框保持在移动视口的中心吗？答案

【问题标题】：Keep jquery dialog in center of mobile viewport when zoom in/out?放大/缩小时将jquery对话框保持在移动视口的中心吗？
【发布时间】：2013-10-14 18:30:45
【问题描述】：

我正在尝试使移动视口的 jquery 对话框中心专门用于 iphone 的 safari，但是当用户尝试放大页面时，对话框会移动到页面的右下角，这使得它不再可见。

代码如下：

//-- 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 的浏览器中完美运行，但对于移动设备，它仅在页面缩小时才有效。

知道怎么做吗？

【问题讨论】：

标签： jquery iphone css position jquery-ui-dialog

【解决方案1】：

这听起来像是 jQueryUI 的问题。

您是否尝试过类似这样的 CSS 替代方案：

$("#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 文件中定义的默认值。

【讨论】：