0

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

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

问题是我不希望 div#address-popup也消失。有没有办法可以将其排除在html,body褪色之外？

4

5 回答 5

5

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

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

于 2012-07-26T15:24:43.267 回答
1

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

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

它工作得很好......

于 2012-07-26T15:42:16.923 回答
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

我认为你最好通过覆盖 a<div>并赋予它透明度来创造褪色背景的“幻觉”。给这个<div>比z-index页面内容的其余部分更高的值。

然后，为了增强您的其他 div 坐在褪色页面上方的错觉#address-popup，只需确保它的 div 甚至高于z-indeztransparent <div>。

于 2012-07-26T15:28:14.187 回答