CODEWITHSUNDEEP
jqueryhtml
user1451848
user1451848

Reputation: 11

How can I fade a whole html page but not one div?

I am trying to make the page fade out when I click a button by using the code:

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

The problem is I don't want the div #address-popup to fade as well. Is there a way I can exclude this from the html,body fade?

Upvotes: 0

Views: 3646

Answers (5)

Gravesy
Gravesy

Reputation: 45

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

Upvotes: 0

Vitor Braga
Vitor Braga

Reputation: 2212

I'm tested a solution here and it worked...

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

It worked very well...

Upvotes: 1

Rodik
Rodik

Reputation: 4092

You cannot have a visible child of a hidden parent. What you need is to append your popup to your body element, and then fade out all of the other elements inside 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);
});

Upvotes: 1

Widor
Widor

Reputation: 13275

I think you'd be better off creating the "illusion" of a fading background by overlaying a <div> and giving it transparency. Give this <div> a z-index higher than the rest of the page's content.

Then, to greate the illusion of your other #address-popup div sitting above the faded page, just make sure it has an even higher z-indez than the transparent <div>.

Upvotes: 0

user229044
user229044

Reputation: 239311

No, you can't. You can't fade the entire document but not some elements within the document.

You're going about this the wrong way. Popups which appear to dim the background typically append a semi-transparent overlay div, which the dialog sits on top of. It is the overlay div which partially obscures the page; the page itself doesn't actually fade out.

Upvotes: 5

Related Questions