?
Solved

Fade in pop up window, with greyed-out page

Posted on 2010-09-06
8
Medium Priority
?
1,384 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
Independent Software Vendors: 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!

 
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

Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

Question has a verified solution.

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

The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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 …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Suggested Courses

762 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