Home/ Questions/Q 8037535
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T02:57:29+00:00

When I click the button the hidden image is shown. The problem I have

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0