1

モバイル デバイス向けの HTML/CSS および jQuery ベースのファイル マネージャーを作成しています。その一部には、さまざまなファイル操作 (コピー、削除など) のための CSS ベースのモーダル ダイアログ ボックスの使用が含まれます。

次のようなモーダル ダイアログの動作を実現します。

<div id="overlay">
     <div id="modalBoxControls"><a href="#" id="modalBoxClose">[close]</a></div>
     <div id="modalBox">
          <div id="modalBoxContent"></div>
     </div>
</div>

CSS は次のとおりです。

#overlay {
 position: fixed;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%;
 text-align:center;
 z-index: 1000;
 background: ([semi-transparent png]);
 display: none;
}
#modalBox {
width: 80%;
background-color: #fff;
margin: 0px auto;
opacity: 1;
}

jQuery を使用して、要素に対して.fadeIn()andを呼び出して表示および非表示にします。.fadeOut()overlay

これまでのところ、これは私の開発マシンのすべてのブラウザーでうまく機能します。

ただし、私の WP7 (Samsung Omnia 7) でテストすると、奇妙なことが起こります。モーダル ダイアログは正常に表示され、その後ろのページは黒く塗りつぶされています。ただし、クリック (またはタップ) は を通過し、#overlayその背後にあるものをすべてアクティブにしますが、背後にあるすべてのものを完全に覆い隠し、z-index は 1000 です。

また、Nick Stakenburg の有名な「Lightview」プラグイン (十分にテストされ洗練されたコード) を使用してこれをテストしたところ、WP7 の IE でも同じ動作が見られました。

したがって、これはブラウザ自体のバグである可能性があります。

誰かがこれに対する解決策を知っていますか?

編集 - 問題の例を含む jsFiddle

したがって、WP7デバイスでこれをチェックして、ファイルの上にオーバーレイがある場合でもファイルをクリックできることを確認してください: http://jsfiddle.net/michaelbromley/CHU76/

4

3 に答える 3

1

「その背後にあるものをアクティブにする」がテキスト入力のような入力コントロールを意味する場合、同じ問題がありました。正直なところ、私は良い解決策を知りません。私の回避策は、ポップアップが表示されている間に入力コントロールを無効にしてから、無効な属性を削除してそれらを再び有効にすることでした。この問題は jqmobile に関連していないようですが、一般的な動作であると思われます。

于 2012-10-27T19:37:17.027 に答える
0

OK、この問題に対する「適切な」解決策はないようです (SO では 24 時間は長い時間です!)。

モーダル ダイアログ ボックスが開いているときに、オーバーレイの「背後」にあるすべての要素 (つまり、タップ/クリックに誤って応答するリンクやその他のもの) の「可視性」CSS プロパティを同時に「非表示」に設定します ( jQueryの.css()機能）。これは、ページ レイアウトに影響がなく、クリックできるものが何もないことを意味します。

私が言ったように、これはちょっとしたハックであり、この問題に遭遇したすべての人に適しているわけではありません. しかし、それは私にとってはうまくいきます。

jsFiddle のコード: http://jsfiddle.net/michaelbromley/CHU76/1/

于 2012-10-28T20:15:00.453 に答える