I made a jquery popup box, and I am having trouble getting the background of the page to darken when the windw pops up.
The url to the page is http://rejuvenateusa.org/endorsements.html.
Heres the code I am using:
html:

<div class="cover"></div>
<div class="popup">
    <div class="close"><img src="images/test_eherenfeldbig.jpg" /><button>close</button></div>
</div>

    <div class="letters">
      <div class="open">
       <div class="letter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/test_ehrenfeldmag.jpg',1)"><img src="images/test_ehrenfeld.jpg" name="Image9" width="150" height="180" border="0" id="Image9" /></a></div>

       <div class="name">Rabbi Simcha Bunim Ehrenfeld</div>
        </div>

css:

.popup 
{
    position:fixed;
    border:solid 1px black;
    /*width:200px;
    height:200px;*/
    left:100px;
    top:100px;
    margin:-100px 0 0 -100px;
    display:none;
    background-color:red;
    z-index:2000;
}

.cover 
{
    background-color:black;
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    z-index:5000;

}

jquery:

<script>
    $(document).ready(function () {

       $(".open").click(function () {
        $(".popup").fadeIn(500);
        $(".cover").fadeTo(500, 0.5);
    });

    $(".close").click(function () {
        $(".popup").fadeOut(500);
        $(".cover").fadeOut(500);
    });
});
    </script>

Any suggestions as to why the "cover" doesnt have the effect?
Thanks.

Recommended Answers

All 6 Replies

use another div outside popup div to completly cover the background and set its background dark.

At first gland I see that you haven't applied top and left CSS properties to the cover div. should be top and left set to 0.

Thanks for your responses, but none helped-
aslam, I do have another div, called "cover" that is supposed to be the blackened background. It's set to width and height of 100%, and set to display:none; so that it should only display when the window pops up. I cant wrap it around the entire popup, otherwise the whole pop-up will have display:none;
jorgem, i tried setting the cover to top and left set to 0, and it made no difference.
anything else????

IIRC, z-index only affects the layering of z-indexable elements (position:absolute, position:relative, or position:fixed). Layering of such elements with respect to those in the normal flow (position:static) can only be achieved by the ordering of nodes within the DOM.

Try moving your cover and popup divs to the very end of the HTML, immediately before </body>

Here is a sample using your code with a few adjustments...

Demo --> jsFiddle

<!doctype html>
<html>
<head>
<style>

.popup {
position:fixed;
border:solid 1px black;
width:200px;
height:200px;
left:45%;
top:25%;
display:none;
background-color:red;
}

.cover {
background-color:black;
width:100%;
height:100%;
display:none;
position:fixed;
top:0;
left:0;
}

.close {
color:#fff;
font-weight:bold;
background-color:#454545;
width:12px;
height:12px;
position:absolute;
top:-12px;
left:-12px;
padding:4px 6px 8px 6px;
border-radius:25px;
cursor:pointer;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="cover"></div>
<div class="popup">
    <div class="close">
       <span>X</span>
    </div>
</div>

<div class="letters">
  <div class="open">
    <div class="letter">
       <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/test_ehrenfeldmag.jpg',1)">
          <img src="images/test_ehrenfeld.jpg" name="Image9" width="150" height="180" border="0" id="Image9" />
       </a>
    </div>
  </div>
  <div class="name">Rabbi Simcha Bunim Ehrenfeld</div>
</div>

<script>
    $(document).ready(function () {
       $(".open").click(function () {
        $(".popup").fadeIn(500);
        $(".cover").fadeTo(500, 0.5);
    });
    $(".close").click(function () {
        $(".popup").fadeOut(500);
        $(".cover").fadeOut(500);
    });
});
</script>

</body>
</html>

thanks for your help. the code works now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.