JQ UI Dialog Position Default not the same Desktop to Mobile答案

【问题标题】：JQ UI Dialog Position Default not the same Desktop to MobileJQ UI Dialog Position Default not the same Desktop to Mobile
【发布时间】：2021-06-01 13:43:00
【问题描述】：

我有一个页面，其中包含包含大量数据的表格，并且在某些列中的多个地方嵌入了按钮，这些按钮会弹出对话框供用户与该行上的数据进行交互。

在桌面浏览器上，JQ UI 完全符合我的要求。如果窗口很窄并且您必须使用滚动条来查找按钮（在最右边的列中），则当您单击按钮时，对话框会在当前查看的屏幕的中心弹出。这是小提琴和代码的链接。

https://jsfiddle.net/davetoolin/c6gzx08L/1/

<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css" />
  <script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <script>
    $(document).ready(function() {

      $("#dialog-test").dialog({
        autoOpen: false,
        width: 100,
        modal: true,
        responsive: true,
        position: {
          my: "center",
          at: "center",
          of: window
        }

      });
      $(".open_dialog").click(function() {
        $("#dialog-test").dialog('open');
      })

    });

  </script>

</head>

<body>
  <div style="min-width:800px">
    <table style="min-width:1350px">
      <tr>
        <td>Data Col-0 Row-0</td>
        <td>Data Col-1 Row-0</td>
        <td>Data Col-2 Row-0</td>
        <td>Data Col-3 Row-0</td>
        <td>Data Col-4 Row-0</td>
        <td>Data Col-5 Row-0</td>
        <td>Data Col-6 Row-0</td>
        <td>Data Col-7 Row-0</td>
        <td>Data Col-8 Row-0</td>
        <td>Data Col-9 Row-0</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-1</td>
        <td>Data Col-1 Row-1</td>
        <td>Data Col-2 Row-1</td>
        <td>Data Col-3 Row-1</td>
        <td>Data Col-4 Row-1</td>
        <td>Data Col-5 Row-1</td>
        <td>Data Col-6 Row-1</td>
        <td>Data Col-7 Row-1</td>
        <td>Data Col-8 Row-1</td>
        <td>Data Col-9 Row-1</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-2</td>
        <td>Data Col-1 Row-2</td>
        <td>Data Col-2 Row-2</td>
        <td>Data Col-3 Row-2</td>
        <td>Data Col-4 Row-2</td>
        <td>Data Col-5 Row-2</td>
        <td>Data Col-6 Row-2</td>
        <td>Data Col-7 Row-2</td>
        <td>Data Col-8 Row-2</td>
        <td>Data Col-9 Row-2</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-3</td>
        <td>Data Col-1 Row-3</td>
        <td>Data Col-2 Row-3</td>
        <td>Data Col-3 Row-3</td>
        <td>Data Col-4 Row-3</td>
        <td>Data Col-5 Row-3</td>
        <td>Data Col-6 Row-3</td>
        <td>Data Col-7 Row-3</td>
        <td>Data Col-8 Row-3</td>
        <td>Data Col-9 Row-3</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-4</td>
        <td>Data Col-1 Row-4</td>
        <td>Data Col-2 Row-4</td>
        <td>Data Col-3 Row-4</td>
        <td>Data Col-4 Row-4</td>
        <td>Data Col-5 Row-4</td>
        <td>Data Col-6 Row-4</td>
        <td>Data Col-7 Row-4</td>
        <td>Data Col-8 Row-4</td>
        <td>Data Col-9 Row-4</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-5</td>
        <td>Data Col-1 Row-5</td>
        <td>Data Col-2 Row-5</td>
        <td>Data Col-3 Row-5</td>
        <td>Data Col-4 Row-5</td>
        <td>Data Col-5 Row-5</td>
        <td>Data Col-6 Row-5</td>
        <td>Data Col-7 Row-5</td>
        <td>Data Col-8 Row-5</td>
        <td>Data Col-9 Row-5</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-6</td>
        <td>Data Col-1 Row-6</td>
        <td>Data Col-2 Row-6</td>
        <td>Data Col-3 Row-6</td>
        <td>Data Col-4 Row-6</td>
        <td>Data Col-5 Row-6</td>
        <td>Data Col-6 Row-6</td>
        <td>Data Col-7 Row-6</td>
        <td>Data Col-8 Row-6</td>
        <td>Data Col-9 Row-6</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-7</td>
        <td>Data Col-1 Row-7</td>
        <td>Data Col-2 Row-7</td>
        <td>Data Col-3 Row-7</td>
        <td>Data Col-4 Row-7</td>
        <td>Data Col-5 Row-7</td>
        <td>Data Col-6 Row-7</td>
        <td>Data Col-7 Row-7</td>
        <td>Data Col-8 Row-7</td>
        <td>Data Col-9 Row-7</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-8</td>
        <td>Data Col-1 Row-8</td>
        <td>Data Col-2 Row-8</td>
        <td>Data Col-3 Row-8</td>
        <td>Data Col-4 Row-8</td>
        <td>Data Col-5 Row-8</td>
        <td>Data Col-6 Row-8</td>
        <td>Data Col-7 Row-8</td>
        <td>Data Col-8 Row-8</td>
        <td>Data Col-9 Row-8</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
      <tr>
        <td>Data Col-0 Row-9</td>
        <td>Data Col-1 Row-9</td>
        <td>Data Col-2 Row-9</td>
        <td>Data Col-3 Row-9</td>
        <td>Data Col-4 Row-9</td>
        <td>Data Col-5 Row-9</td>
        <td>Data Col-6 Row-9</td>
        <td>Data Col-7 Row-9</td>
        <td>Data Col-8 Row-9</td>
        <td>Data Col-9 Row-9</td>
        <td><button type="button" class="open_dialog" style="float:right">OPEN Dialog</button></td>
      </tr>
    </table>
  </div>
  <div id="dialog-test" title="test Dialog" style="display:none">This a test dialog to see in the default JQ positioning is centered in mobile devices.</div>
</body

在电话上，它根本不工作。（我还没有弄清楚如何使用小提琴进行移动仿真）单击时，我向左滑动以查看按钮。屏幕取消滑动并移回表格的左边缘，并显示以最左侧数据为中心的对话框。我不希望这种不刷卡行为。

我已经尝试了大多数技巧，我在其他 SO 中发现了它们都适用于桌面浏览器，但都不影响移动视图。这是一些屏幕截图

提前致谢。

下面的 Twistys 评论完美地总结了我的问题。

对话窗口正在窗口的中心打开，或者也许是文档，但不是视口区域的中心设备。您希望它保持向右滚动和对话框应该出现在屏幕或可视区域的中心。

【问题讨论】：

您可以使用show 路径只提供结果，这可用于移动测试：例如jsfiddle.net/davetoolin/c6gzx08L/1/show。
当我使用带有 Goggle Chrome 的 Android 测试代码时，它按预期工作：jsfiddle.net/Twisty/ouqpvwzb/2/show
我无法让我点击该节目，但我添加了一些屏幕截图。
请描述复制问题的具体步骤。如果您在导航到 Fiddle 后将浏览器设置为使用 iPhone 视图，它可能无法读取正确的窗口属性。在移动设备本身上进行测试也很好。
我还使用 iPhone 6/7/8 iOS 11 响应式设计模式对 FireFox 88 进行了测试。我无法重现您描述的问题。

标签： jquery-ui mobile dialog

【解决方案1】：

您可能需要尝试定义当时的位置，在小部件本身上使用open：

https://jsfiddle.net/Twisty/ouqpvwzb/49/

JavaScript

$(function() {
  $("#dialog-test").dialog({
    autoOpen: false,
    width: 100,
    modal: true,
    responsive: true,
    open: function(event, ui) {
      $(this).dialog("widget").position({
        my: "center",
        at: "center",
        of: window
      });
    }
  });

  $(".open_dialog").click(function() {
    $("#dialog-test").dialog('open');
  })
});

我不建议使用event.target。我会使用this，因为它应该代表原始 DIV 项。

您也可以使用文档宽度或向左滚动来强制它。

Right: (Window Width / 2) - 50

如果窗口是 480 像素，这可以从右 190 像素设置位置。这将使对话框居中。

【讨论】：

我把你的 JS 代码放到了实时页面中。行为还是有的。我过去曾尝试过大部分这些事情。感谢您的尝试。