文章/答案/技术大牛

发布

社区首页 >问答首页 >默认情况下，JQ对话框位置与移动桌面不同

问默认情况下，JQ对话框位置与移动桌面不同
EN

Stack Overflow用户

提问于 2021-06-01 13:43:00

回答 1查看 89关注 0票数 0

我有一个包含大量数据的表，在一些列中有嵌入的按钮，这些按钮会弹出对话框供用户与该行上的数据进行交互。

在桌面浏览器上，JQ做我想做的事情。如果窗口很窄，并且必须使用滚动条来查找按钮(在最右边的列中)，则当您单击该按钮时，对话框会在当前查看的屏幕中心弹出。这里有一个指向小提琴和代码的链接。

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

在电话里，它根本不是那样工作的。(我还没有想过如何使用小提琴进行移动仿真)当我点击按钮时，我会滑动鼠标以查看按钮。屏幕取消滑动并移回表格的左侧边缘，并显示以最左边数据为中心的对话框。我不想这种不偷东西的行为。

我已经尝试了所有的技巧，我发现在其他的，所以，他们都工作很好的桌面浏览器，但没有影响移动视图。以下是一些屏幕截图

提前谢谢。

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

对话框窗口是打开在窗口的中心，或者可能是文档，但不是设备的视图区的中心。您希望它保持向右滚动，并且对话框应该显示在屏幕或可视区域的中心。

。

jquery-ui

mobile

dialog

回答 1

Stack Overflow用户

发布于 2021-06-02 21:24:12

您可能需要尝试定义这个位置，在小部件本身上使用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像素设置位置。这将是对话的中心。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67790002

复制

相似问题

问默认情况下，JQ对话框位置与移动桌面不同
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问默认情况下，JQ对话框位置与移动桌面不同EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问默认情况下，JQ对话框位置与移动桌面不同
EN