Member Avatar for suavedesign

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.

  • 4 Contributors
  • 6 Replies
  • 7K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by suavedesign
Member Avatar for M.Waqas Aslam

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

Member Avatar for JorgeM

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.

Member Avatar for suavedesign

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

Member Avatar for Airshow

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>

Member Avatar for JorgeM

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>
Edited by JorgeM
Member Avatar for suavedesign

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.