Home/ Questions/Q 9255179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:39:24+00:00

Here is my code, but still i am not getting an ouput what i

  • 0

Here is my code, but still i am not getting an ouput what i expect.

<head>
    <script>
        function overlay()
        {
            $("body").css ({
                "background" : "#fff",
                "z-index"    : "999",
                "opacity"    : "0.50",
                "position"   : "relative",
            });
            $("#popupContact").css ({
                "position"   : "relative",
                "z-index" : "999",
                "opacity"    : "1"
            });
        }
    </script>
</head>
<body>
   <div id="popupContact">
       <h1>Sample Test</h1>
   </div>
<a onclick="return overlay();">Click to view</a>
</body>

If i click on that <a> , a popup window will be open , in that time i want to show popup division as highlighted and body should be dim..

Any useful answer will be really appreciate..

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the problem is your child div popupContact is inheriting body opacity

    So one of the possible workarounds is to use this instead of background:#fff

    use this background-color: rgba(0,0,0,0.5);

    <head>
    <script>
    function overlay()
    {
        $("body").css ({
            "background-color" : "rgba(0,0,0,0.5)",
            "z-index"    : "999",
            "position"   : "relative",
        });
        $("#popupContact").css ({
            "background-color" : "rgba(200,200,200,1)",
            "position"   : "relative",
            "z-index" : "9919",
            "opacity"    : "1"
        });
    }
    </script>
</head>
<body>
   <div id="popupContact">
       <h1>Sample Test</h1>
   </div>
<a onclick="return overlay();">Click to view</a>
</body>

    Here is a link for the fiddle
    http://jsfiddle.net/XFn67/

    • 0