?
Solved

Fade in pop up window, with greyed-out page

Posted on 2010-09-06
8
Medium Priority
?
1,393 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:DJSharepoint
  • 5
  • 3
8 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 33610978
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
0
 

Author Comment

by:DJSharepoint
ID: 33611258
Hi Darren, do you have any code for this?
Sorry, new to JQuery/Java
0
 
LVL 13

Accepted Solution

by:
darren-w- earned 2000 total points
ID: 33611513
Hi,

You need to download the jquery ui plugin from here:  http://jqueryui.com/download

Extract it into your folder system,

And then include it on your page in the heading like the lines below,

The code for the standard model dialouge box is here (see view source): http://jqueryui.com/demos/dialog/#modal-message

Fading out can be acheived by using a similar example as below:

$("#dialog").dialog({
  close: {effect: "fadeOut", duration: 5000},
  open: {effect: "fadeIn", duration: 5000}
});






<link type="text/css" href="css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
LVL 13

Expert Comment

by:darren-w-
ID: 33611766
Actually the effects can be achieved as show here: http://jqueryui.com/demos/effect/

$("#dialog").dialog({
  close:'slide',
  open: 'puff'
});
0
 

Author Closing Comment

by:DJSharepoint
ID: 33639356
Thanks Darren. Works a treat
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33639848
Great to here
0
 

Author Comment

by:DJSharepoint
ID: 33641050
Yeah, looks good.
Must learn JQuery,  although busy learning C# at the mo!
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33641768
Same to doing c# and java with the OU there more or less the same though
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question