2

上から下までの私のjQMページの基本的な説明（この質問の最後にコードがあります）：

  1. ボタンと、ボタンをクリックすると開くポップアップを含むヘッダー バー。
  2. 1 ～ 4 個の HTML5 キャンバスを含む領域。キャンバスは追加/削除でき、動的にサイズ変更されてウィンドウの中央部分を隙間なく埋めます。
  3. いくつかのボタンとスライダーを含む div。すべてのキャンバスには display:block 属性があり、キャンバスが 2 ～ 4 個ある場合は、一部に float:right 属性が与えられます。キャンバスが1つしかない場合、以下の問題は発生しません。

すべてが正しい位置にあり、ウィンドウのサイズが変更されると動的にサイズが変更されます。ボタンがクリックされる前は、すべて問題ありません。ボタンをクリックすると、ポップアップは正常に表示されますが、4 つのキャンバスがブロック象限から外れて、スクロールバーが表示されるポイントまでページが引き伸ばされます。不思議なことに、元に戻してから最大化すると、キャンバスが正しい位置に戻り、ポップアップが必要な場所に残ります。ポップアップを閉じて開くたびに、キャンバスが再びずれてしまいます。

画像リンクについては申し訳ありませんが、それらを埋め込むという評判はありません。

ポップアップを開く前に:

ここに画像の説明を入力

ポップアップを開いた後：

ここに画像の説明を入力

復元してから最大化すると、最初に望んでいたものが得られます:(評判のために3番目のリンクを追加できません。元のレイアウトの上にポップアップが正しく表示された最初の2つの画像の組み合わせを示しています)

ポップアップ用の 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"});
});

これを 1 つの質問にまとめると、なぜ jQM ポップアップを開くとバックグラウンド レイアウトに影響するのでしょうか?

4

1 に答える 1

0

このコードを移動します:

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

ヘッダーの外側。

于 2013-05-02T01:32:37.990 に答える