2

我的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：

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

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

4

1 回答 1

0

移动这段代码：

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

头部之外。

于 2013-05-02T01:32:37.990 回答