jquery - 将 jQuery 对话框中心定位在移动设备问题上

Question

我在网站上使用带有 position:fixed 的 jQuery 对话框。在 PC 上，该对话框默认位于中心位置。 在移动设备上，它将位置设置为左上角。我尝试了不同的方法，但未能在移动设备上定位此对话框中心。

代码:

CSS:

.ui-dialog {
    position: fixed;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
}

JS:

function isMobileDevice() {
    var mobileRegEx = new RegExp("Android|webOS|iPhone|iPad|iPod|BlackBerry", "i");
    return mobileRegEx.test(navigator.userAgent);
}

$("#myDialog").dialog({
  title: "Info",
  closeText: "Close",
  width: 440,
  minWidth: 440,
  height: 250,
  minHeight: 250,
  modal: true,
  resizable: false,
  open: function() {
    if (isMobileDevice()) {
        $(this).dialog("option", "position", { my: "center", at: "center", of: window });
    }
  }
});

有什么想法如何将其设置到移动设备的中心吗？感谢您的帮助。

Answer 1

所以，我自己修复了它。我的解决方案适用于两种屏幕方向:纵向和横向。

1. 我将对话中心设置为 document而不是window :$(this).dialog("option", "position", { my: "center", at: "center", of: document, within: document });这会将对话框设置为纵向模式下文档的中心，并设置横向模式下的起点。
2. 我运行mobileDlgPosition()函数，检查横向模式。如果设备处于横向模式，则会计算并设置对话框 top使用此方法定位:(window.outerWidth - $(".ui-dialog").width()) / 2;
3. 最后，我添加了 $(window).on("orientationchange")检查对话框实例的函数，如果对话框实例可用，则运行 mobileDlgPosition()功能。

我的代码:

function isMobileDevice() {
    var mobileRegEx = new RegExp("Android|webOS|iPhone|iPad|iPod|BlackBerry", "i");
    return mobileRegEx.test(navigator.userAgent);
}

$(window).on("orientationchange", function() {
  var dlgInstance = $("#" + $(".ui-dialog").attr("aria-describedby")).dialog("instance");
    
  if (dlgInstance) {
      mobileDlgPosition();
  }
});

function mobileDlgPosition() {
    if (window.screen.orientation.type != "portrait-primary") {
        var landscapeTopPos = (window.outerWidth - $(".ui-dialog").width()) / 2;
        $(".ui-dialog").css("top", landscapeTopPos + "px");
    }
}

$("#myDialog").dialog({
  title: "Info",
  closeText: "Close",
  width: 440,
  minWidth: 440,
  height: 250,
  minHeight: 250,
  modal: true,
  resizable: false,
  open: function() {
    if (isMobileDevice()) {
        $(this).dialog("option", "position", { my: "center", at: "center", of: document, within: document });
        mobileDlgPosition();
    }
  }
});

我在我的手机小米9上进行了测试。一切正常。

结果: