影响页面布局的 jQuery Mobile 弹出窗口？

Posted 2023-05-09

【中文标题】影响页面布局的 jQuery Mobile 弹出窗口？

【英文标题】：jQuery Mobile Popups affecting page layout?

【发布时间】：2013-01-19 14:52:18

【问题描述】：

我的jQM页面从上到下的基本描述（本题底部有代码）：

包含一个按钮和一个通过单击该按钮打开的弹出窗口的标题栏。 包含 1 到 4 个 html5 画布的区域。画布可以添加/删除，并且可以动态调整大小以填充窗口的中间部分，它们之间没有空格。 一个包含几个按钮和一个滑块的 div。所有画布都有 display:block 属性，当有 2-4 个画布时，有些画布会被赋予 float:right 属性。只有一张画布时，不会出现以下问题。

一切都在正确的位置，并在调整窗口大小时动态调整大小。在单击按钮之前，一切都很好。单击按钮时，弹出窗口显示得很好，但是 4 个画布被从它们的块象限中剔除，并将页面拉伸到出现滚动条的位置。奇怪的是，当我还原然后最大化时，画布又回到了正确的位置，并且弹出窗口仍然在我想要的位置。每当我关闭并打开弹出窗口时，画布就会再次被撞到不合适的位置。

为图片链接道歉，但我没有嵌入它们的声誉。

打开弹窗前：

打开弹窗后：

还原然后最大化后，我得到了我最初想要的：（由于声誉，无法添加第三个链接；它显示了前两个图像的组合，弹出窗口正确显示在原始布局上）

弹出窗口的HTML（这是我实际使用的简化版本，但效果相同）：

<div id="header" data-role="header">  
  <a id="menu-button" data-transition="pop" href="#simplepopup" data-role="button"
         style="margin:0; padding:0;">Open Popup</a>
  <div data-role="popup" id="simplepopup"> 
    TEST
  </div>
</div>

弹窗的JS：

$("#menu-button").click(function () 
  $('#simplepopup').popup('open', positionTo: "window");
);

归结为一个问题：为什么打开 jQM 弹出窗口会影响背景布局？

【参考方案1】：

移动此代码：

<div data-role="popup" id="simplepopup"> TEST </div>

在标题之外。