jQuery Mobile Popups会影响页面布局吗？

Question

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

1. 标题栏包含一个按钮和一个通过单击按钮打开的弹出窗口。
2. 包含1到4个HTML5画布的区域。可以添加/删除画布并动态调整大小以填充窗口的中间部分，它们之间没有空格。
3. 包含几个按钮和滑块的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 for popup：

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

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

Answer 1

移动此代码：

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

标题之外。