Home/ Questions/Q 3230870
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:58:41+00:00

I am using the following code to fade out background while showing a popup.

  • 0

I am using the following code to fade out background while showing a popup. This is the div container

Css for the same 

#VbackgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}

When some clicks a div i am showing a popup and greying out background by using the 

function GreyoutBackground() {
    $("#VbackgroundPopup").css({
        "background-color": "#000000",
        "filter": "alpha (opacity=70)",
        "filter": "progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=70)",
        "-moz-opacity": "0.7",
        "opacity": "0.7",
        "-khtml-opacity": ".7",
        "zoom": "1"
    });
    $("#VbackgroundPopup").css({ "opacity": "0.6" });
    $("#VbackgroundPopup").show();
}

The above code is working fine in Firefox , but in internet explorer its not working , can someone please tell me what is the issue.
i tried width 100% and height 100% , that also didn’t workout

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This works fine (tested in IE6 too):

    <!DOCTYPE html>
<html>
<head>
    <title>Fade</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<button>Fade in the overlay</button>
<div id="overlay"></div>
<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#overlay {
    background-color: #000000;
    display:none;
    height:100%;
    top: 0;
    left: 0;
    position: fixed;
    _position: absolute;
    width: 100%;
    z-index: 999;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function($){
    $('button').click(function(){
        $('#overlay').fadeTo('slow', 0.5);
    });
});
</script>


</body>
</html>

    I prefered using fadeTo than css('opacity') because the transition is animated.

    • 0