Question

当我使用代码点击按钮时，我试图让页面淡出：

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

问题是我不希望div #address-popup也褪色。有没有办法可以将其从html,body淡出中排除？

Answer 1

不，你不能。您不能淡化整个文档，也不能淡化文档中的某些元素。

你这是错误的方式。看起来暗淡背景的弹出窗口通常附加一个半透明的叠加div，对话框位于其上方。覆盖div部分遮盖了页面;页面本身并没有实际淡出。

Answer 2

您不能拥有隐藏父级的可见子级。你需要的是将弹出窗口附加到你的身体元素，然后淡出身体内的所有其他元素。

<强> 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);
});

Answer 3

我在这里测试了一个解决方案并且有效...

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

效果很好......

Answer 4

我认为你最好通过覆盖<div>并赋予其透明度来创造衰落背景的“错觉”。将此<div>一个z-index高于页面内容的其余部分。

然后，为了增加位于淡化页面上方的其他#address-popup div的幻觉，只需确保它比透明z-indez更高<div>。

Answer 5

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();
    }
});

如何淡化整个html页面而不是一个div？

5 个答案: