Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Fade in pop up window, with greyed-out page

Posted on 2010-09-06
8
1,380 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 500 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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