CODEWITHSUNDEEP
jquerycssjquery-effects
Clodoaldo Neto
Clodoaldo Neto

Reputation: 125214

Fade Out the background only

When I click the button the hidden image is shown. The problem I have is that I want the (now) background to be faded or blackened and what is happening is that everything is faded including the shown image.

show hidden image

How to fadeOut only the background?

<div id="chart" style="text-align: center;display:none;position:fixed;z-index:-100;">
    <img src="/donor-radar-chart?radar=%5B%5B%22W.Feather%22%2C0%2C26635692%2C240660%5D%2C%5B%22Jesterium%22%2C6%2C26297636%2C668476%5D%2C%5B%22OCFthanks%5BH%5D%22%2C6%2C19286508%2C8442507%5D%2C%5B%22wyluliraven%22%2C11%2C23246906%2C2486642%5D%2C%5B%22Quisarious%22%2C21%2C15048498%2C4027046%5D%2C%5B%22Breeze%22%2C22%2C23116432%2C1369416%5D%2C%5B%22Filter%22%2C40%2C27698092%2C54722%5D%2C%5B%22Axiomatic%22%2C70%2C16109511%2C1287889%5D%2C%5B%22DEJ915%22%2C80%2C21659570%2C677966%5D%2C%5B%22rIg0r_m0rTiS%22%2C84%2C29503180%2C1212%5D%2C%5B%22daggerhead%22%2C103%2C2553248%2C1880421%5D%5D"
        width="640" height="300" class="imgChart" alt="Donor Radar Chart"
        />
    </div>

<div style="background-color: #fafafa;">
    <table class="radar" id="radar" width="100%">
        <thead>
            <tr>
                <th colspan="2">Overtake</th>
                <th rowspan="3">Challenging Member</th>
                <th colspan="10">Challenging Member Stats
                    <span>
                        <input type="button" value="Chart" onclick="
                            var $body = $('body');
                            var $chart = $('#chart');
                            var left = Math.floor(($body.outerWidth() - 640) / 2);
                            var top = Math.floor(($body.outerHeight() - 300) / 2);
                            $body.fadeTo('fast', 0.5);
                            $chart
                                .css('left', left).css('top', top)
                                .css('z-index', '100').fadeTo('fast', 1);
                            $chart.on('click', function() {
                                $chart.fadeOut('fast');
                                $body.fadeTo('fast', 1);
                            });
                            "></span>
                    </th>
                </tr>

Upvotes: 0

Views: 1301

Answers (2)

S&#243;fka
S&#243;fka

Reputation: 993

It's simple. The easiest way: First - throw out

$body.fadeTo('fast', 0.5);

and

$body.fadeTo('fast', 1);

Second - add some styles to chart element:

<div id="chart" style="text-align: center;display:none;position:fixed;z-index:-100; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0px; left: 0px;">
<img src="/donor-radar-chart?radar=%5B%5B%22W.Feather%22%2C0%2C26635692%2C240660%5D%2C%5B%22Jesterium%22%2C6%2C26297636%2C668476%5D%2C%5B%22OCFthanks%5BH%5D%22%2C6%2C19286508%2C8442507%5D%2C%5B%22wyluliraven%22%2C11%2C23246906%2C2486642%5D%2C%5B%22Quisarious%22%2C21%2C15048498%2C4027046%5D%2C%5B%22Breeze%22%2C22%2C23116432%2C1369416%5D%2C%5B%22Filter%22%2C40%2C27698092%2C54722%5D%2C%5B%22Axiomatic%22%2C70%2C16109511%2C1287889%5D%2C%5B%22DEJ915%22%2C80%2C21659570%2C677966%5D%2C%5B%22rIg0r_m0rTiS%22%2C84%2C29503180%2C1212%5D%2C%5B%22daggerhead%22%2C103%2C2553248%2C1880421%5D%5D"
    width="640" height="300" class="imgChart" alt="Donor Radar Chart"
    />
</div>

Now, chart takes all screen width and height and has own transparent background which covers all under chart :) Hope it will help.

Upvotes: 5

Sam Tyson
Sam Tyson

Reputation: 4616

You can use the jQuery UI animate to transition the background color from one color to the other:

$("#radarDiv").toggle(function() {
    $(this).animate({ backgroundColor: "white" }, 1000);
},function() {
    $(this).animate({ backgroundColor: "#fafafa" }, 500);
});

You might need to also specifically set the background color on the table.

Upvotes: 3

Related Questions