0

コードを使用してボタンをクリックするとページがフェードアウトするようにしようとしています:

$("#post_btn").click(function(){
  $("#address-popup").css({display: "block"});
  $("html,body").fadeTo("slow",0.4);
});

#address-popup問題は、divもフェードさせたくないということです。html,bodyこれをフェードから除外する方法はありますか?

4

5 に答える 5

5

いいえ、できません。ドキュメント全体をフェードすることはできませんが、ドキュメント内の一部の要素をフェードすることはできません。

あなたはこれについて間違った方法で進んでいます。背景をぼかすように見えるポップアップは、通常、ダイアログがその上にある半透明のオーバーレイ div を追加します。ページを部分的に隠しているのはオーバーレイ div です。ページ自体は実際にはフェードアウトしません。

于 2012-07-26T15:24:43.267 に答える
1

非表示の親の可視の子を持つことはできません。必要なのは、ポップアップを body 要素に追加してから、body 内の他のすべての要素をフェードアウトすることです。

HTML:

<body>
   <div class="header">
   </div>
   <div class="content">
   </div>
   <div class="footer">
   </div>
   <div class="popup">
   </div>
</body

JS:

$("#post_btn").click(function(){
   $("body > div:not(.popup)").fadeTo("slow",0.4);
});
于 2012-07-26T15:28:58.713 に答える
0

HTML

<div class="blind"></div>
<div class="topDiv">
<h1>Popup Effect DIV</h1>
<p>This DIV will still display when the rest of the page has been faded out</p>
</div>
<a class="fadeOut">Load Popup.</a>

CSS

.blind {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FFF;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0.9;
    filter: alpha( opacity = 90 );
    display: none;
}
.topDiv {
    display: none;
    width: 250px; 
    height: 250px;
    border: solid 1px red;
    background-color: #FFF;
    z-index: 2000;
    position: absolute;
    top: 50px;
    left: 250px;
}

JS

/* Load Popup and fade background */
$('.fadeOut').click(function(e){
    $('.blind').toggle();
    $('.topDiv').toggle();
});
/* Close popup and loose fade when you click outside the popup */
$(document).mouseup(function (e){
    var container = $('.topDiv');
    if (!container.is(e.target) && container.has(e.target).length === 0){
        container.hide();
        $('.blind').hide();
    }
});
于 2013-12-19T17:00:14.053 に答える
0

<div>を重ねて透明にすることで、背景が薄くなる「錯覚」を作ったほうがいいと思います。これ<div>をz-indexページの他のコンテンツよりも高くします。

#address-popup次に、色あせたページの上に他の div が置かれているような錯覚を起こすにはz-indez、transparentよりも高い<div>.

于 2012-07-26T15:28:14.187 に答える