0

ユーザーがボタンをクリックするとアクティブになるオーバーレイがサイトにあります。

このオーバーレイは見た目も機能も問題ありません。それは、ユーザーがブラウザをズームすることを決定するまでです。オーバーレイがposition：fixedを利用しているためにブラウザーがズームされている場合、ブラウザーはスクロールせず、ユーザーは送信ボタンにアクセスしたり表示したりできません。

一部の視覚障害のあるユーザーにとって、これは望ましくありません。誰かが私がその場で何かを検出し、おそらく静的ページに含まれているフォームを検出してリダイレクトする方法を知っていますか？

4

2 に答える 2

2

ズームはウィンドウのサイズ変更と同様の効果があるので（間違っている場合は修正してください）、resize()イベントを使用してオーバーレイの幅と高さを更新できます。例については、以下を参照してください。

$(window).resize(function(){
   $('#Overlay').css({
      height:window.innerHeight,
      width:window.innerWidth
   )};
});

編集

これは、ブラウザのズームとウィンドウのサイズ変更で機能するフィドルです。

于 2013-03-11T23:03:49.903 に答える
0

ここで問題を完全に理解しているのかわかりません。オーバーレイがありますが、オーバーレイは...何かをオーバーレイしています。これは問題のようです。

とにかく、私は通常次のようなオーバーレイを行います。

.overlay {
    background-color: #777;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* This is important, maybe what you're after, the content you want 
       to show has to have a higher z-index than the overlay itself! */
    z-index: 99; 
}

z-indexを使用すると、要素のスタック順序を選択できます。これにより、問題が解決する可能性があります。

于 2013-03-12T08:44:38.280 に答える