Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Fade in pop up window, with greyed-out page

Posted on 2010-09-06
8
Medium Priority
?
1,385 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
[X]
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
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

609 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