Solved

Fade in pop up window, with greyed-out page

Posted on 2010-09-06
8
1,377 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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 …

757 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now