Tue, 2014-01-07 03:56
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.
Tue, 2014-01-07 05:13
#1
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.
Tue, 2014-01-07 05:28
#2
No, that didnt work here. Any
No, that didnt work here.
Any other suggestions??
Tue, 2014-01-07 05:37
#3
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.
Wed, 2014-01-08 04:16
#4
Thank you!!!
Thank you!!!
Wed, 2014-01-08 04:19
#5
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!!
Wed, 2014-01-08 05:29
#6
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); }); });
Thu, 2014-01-09 05:25
#7
thank you. it worked- your
thank you. it worked- your help was greatly appreciated!!!