Link to home
Start Free TrialLog in
Avatar of DJSharepoint
DJSharepoint

asked on

Fade in pop up window, with greyed-out page

Hi all,

I have used some Javascript and CSS I found on the net to create a pop up window
that successfully grey's out the main page when it appears. To enhance the effect, I want the pop up window to fade in and out. I don't know Java and wondered if any of you guys could amend the code  I have so that the pop up windows fades in and out, when opened/closed.
Here is the code:


<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>

CSS:

#dialog {
display:none;
left:220px;
top:200px;
width:500px;
height:300px;
position:absolute;
z-index:100;
background:white;
border:1px solid gray
}





#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:black;
filter:alpha(Opacity=70);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}

Thanks in advance
Avatar of darren-w-
darren-w-
Flag of United Kingdom of Great Britain and Northern Ireland image

Hi,

This may be an easer method, you could use a jquery dialogue, and use fade-in on the open event and fade-out on the close event, using a model confirmation.

http://jqueryui.com/demos/dialog/



Darren
Avatar of DJSharepoint
DJSharepoint

ASKER

Hi Darren, do you have any code for this?
Sorry, new to JQuery/Java
ASKER CERTIFIED SOLUTION
Avatar of darren-w-
darren-w-
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Actually the effects can be achieved as show here: http://jqueryui.com/demos/effect/

$("#dialog").dialog({
  close:'slide',
  open: 'puff'
});
Thanks Darren. Works a treat
Great to here
Yeah, looks good.
Must learn JQuery,  although busy learning C# at the mo!
Same to doing c# and java with the OU there more or less the same though