7 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi suavedesign, You are

Hi suavedesign,
You are setting the cover to display:none and not then setting it back to block.
Instead of display:none you may be able to set it's opacity to 0.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

No, that didnt work here. Any

No, that didnt work here.
Any other suggestions??

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Maybe I didn't explain it

Maybe I didn't explain it well.
You need to remove the display:none; from .cover and replace it with opacity:0;
Then you most likely will have to adjust the z-index of a couple of elements.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Thank you!!!

Thank you!!!

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

oops, my excitement was

oops, my excitement was short-lived.
For some reason, the first time you try it after refreshing the page, it does work, but when you try it again, it does not work!!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

The fadeOut function must be

The fadeOut function must be setting the display property to none.
Try this:

$(document).ready(function () {
 
           $(".open").click(function () {
            $(".popup").fadeIn(500);
            $(".cover").fadeTo(500, 0.5).css('display', 'block');
        });
 
        $(".close").click(function () {
            $(".popup").fadeOut(500);
            $(".cover").fadeOut(500);
        });
    });

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

thank you. it worked- your

thank you. it worked- your help was greatly appreciated!!!