3

視差スクロールとモーダルボックスの両方を利用するウェブサイトをデザインしています。モーダルボックスの1つを開くと、jQueryとCSSを使用して、ポップアップのDIV要素にクラスを追加し、不透明度が0から100になるようにします。私はこれをきれいに見せるためにトランジションを使用しています。ボックスを閉じると、jQueryはクラスを削除して、不透明度を0に戻します。

モーダルボックスを読みやすくするために、その後ろにオーバーレイ（実際にはDIVを含む）を配置し、幅と高さを100％にして、画面の残りの部分に透明度をオーバーレイしました。また、同じトリックを使用して、ボックスを開いたときに0から100まで、閉じたときにその逆の不透明度を取得します。

問題は、不透明度0でも、オーバーレイが画面の一部の「上」にあり、リンクとテキストを表示できるが選択できないということです。オーバーレイを非表示にする場合は、Z-Indexを0と-1に設定しようとしましたが、視差スクロールが原因です（SCRNテンプレートのカスタマイズバージョンを使用しています。参照用にhttp://rodrigob.com / themes / scrn /）は、相対、固定、絶対位置を使用します。Z-Indexは一部のサイトにのみ適用されます。

回避策として、Visibility：Hiddenでオーバーレイをスタイリングすることは機能します（Display：Noneと同様ですが、アクセシビリティの理由からこれは避けたいです）が、これはトランジションでは管理できないため、モーダルが閉じると消えます。うまくフェードアウトする代わりに。

これを回避する方法はありますか？不透明度100から0への移行が発生した後、可視性を非表示に設定することは機能すると思いましたが、それが可能であるとしても、これを行う方法がわかりません。

前もって感謝します。

4

6 に答える 6

1

setTimeoutオーバーレイが表示された後にアニメーションを開始し、アニメーションが終了した後にオーバーレイを非表示にするために使用します

オーバーレイを表示するには：

// show the overlay (in whatever manner you like) BEFORE the animation starts
// opacity is 0
$('#overlay').show();
setTimeout(function() {
  // fade in the opacity AFTER the overlay is there
  $('#overlay').addClass('opaque');
}, 0);

オーバーレイを非表示にするには：

// fade out the opacity BEFORE the overlay goes away
$('#overlay').removeClass('opaque');
setTimeout(function() {
  // hide the overlay (in whatever manner you like) AFTER the animation is done
  // opacity is 0
  $('#overlay').hide();
}, 250);
于 2013-01-15T15:31:00.557 に答える
1

オーバーレイに「不透明度：100」または「可視性：非表示」を設定しても、実際にはオーバーレイが削除されません。あなたがしたいのは要素を削除することです。

概念的に言えば、オーバーレイはまだそこにあります。コンテンツの上のガラスのように、見ることはできますが触れることはできません。目に見えないオーバーレイガラスはまだそこにあります。それは、 windexで洗われた超透明なガラス窓のようなもの です。その男は、オーバーレイの下にあるリンクをクリックしようとしているユーザーです。

必要なのは、DOMから要素を削除するか、遷移後に「display：none」に設定することです。

私が使用するクロスブラウザである最良の解決策は、表示を設定することです：アニメーションの後になし。

$(".overlay").animate({"opacity": "0"}, function(){
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
});

個人的には、モーダルをコンテナーにラップして固定の位置を指定し、非表示のモーダルコンテンツと一緒にコンテナーを削除するのが好きですが、それは私です。

私はjefferyの派手なcssトランジションエンドメソッドも好きです。css3に夢中になりたい場合は、注意が必要です。おそらく、どのベンダープレフィックスをリッスンする必要があるかを検出する必要があります。

ベンダープレフィックス付きの移行終了は次のとおりです。

var transitionEnd = {
  'WebkitTransition' : 'webkitTransitionEnd'
  ,  'MozTransition'    : 'transitionend'
  ,  'OTransition'      : 'oTransitionEnd'
  ,  'msTransition'     : 'transitionend'
  ,  'transition'       : 'transitionend'
}

ユーザーに関連するものを検出するために何かを書く必要があります。

$(".overlay").on(transitionEnd, function() {
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
}
于 2013-01-22T15:12:43.397 に答える
0

不透明度の遷移後に設定する遷移終了イベントをリッスンできます。visibility: hidden

于 2013-01-16T10:29:42.157 に答える
0

要素をレイアウトに他の要素と混合する必要があるため、要素opacityを配置できないコンテキストに配置するだけで作業します（ W3C）。z-index

opacityさらに考慮すべき点として、またはのみの要素visibilityはレイアウトフローから抽出されないため、表示されていなくてもその位置とサイズを占有します。これにより、非表示の要素の下にあるすべての要素に到達できなくなります（クリックは禁止されます）。 、ボタンはクリックできませんなど）。

display問題を解決するには、に設定する必要がありますnone。このようにして、要素は非表示になり、レイアウトフロー内のスペースを占有しなくなります。

于 2013-01-16T14:55:54.847 に答える
0

jQueryの関数animateは、アニメーションが完了したときに実行されるコールバック関数を受け入れます。例：

$('.overlay').animate({
    opacity: 0
}, 300 /* animation duration in ms */, function () {
    // This will execute when the animation is complete
    $(this).css({
        visibility: 'hidden'
    });
});
于 2013-01-18T12:29:29.813 に答える
0

z-indexを使用でき、回避策を探す必要はないと思います。おそらく必要なのは、レイアウトをDOMツリーの上位に配置することだけです。あなたのコードを見ずに言うのは難しいですが、あなたが次のようなものに行くことができれば

<body>
    <div id="everyting-else">
       ...
    </div>
    <div id="overlay"/>
</body>

次に、＃everyting-elseに2のz-indexを指定し、＃overlayに1のz-indexを指定します。これは、異なるスタッキングコンテキストにあるため、「everything-else」のコンテンツに関係なく機能するはずです。

div内で「相対、固定、絶対ポジショニング」を使用するかどうかは関係ありません

于 2013-01-21T21:36:21.693 に答える