vincevincevince
msg:3655002 | 2:32 am on May 21, 2008 (gmt 0) |
Your description sounds about right. It is also possible to do it in a lowtech way with a transparent IFRAME which you switch to visible and set the src for
|
venti
msg:3655045 | 4:12 am on May 21, 2008 (gmt 0) |
They are typically called "modals" and there are a number of different scripts and modules that can be implemented very quickly.
|
corodyne
msg:3655159 | 10:55 am on May 21, 2008 (gmt 0) |
Vince/Venti, Thanks very much for the responses. Could you describe how the IFrame would be set? In a layer with a higher z-setting or something else? For the modals/modules, do you have a source/link where I could find these? Thanks again
|
Trace
msg:3655223 | 12:51 pm on May 21, 2008 (gmt 0) |
From your description, sounds like you're just describing a lightbox. Google "lightbox", you'll get tons of examples.
|
WesleyC
msg:3655565 | 5:58 pm on May 21, 2008 (gmt 0) |
For a more hands-on/technical solution, I highly recommend checking out the Yahoo User Interface library--especially its Animation tools. [edited by: WesleyC at 5:59 pm (utc) on May 21, 2008]
|
XtendScott
msg:3656353 | 1:58 pm on May 22, 2008 (gmt 0) |
Here is the guts of some code I use for a "Help PopUp". It fades in then out. It should get you started. ** Sorry if the Alpha/Opacity is coded for IE, I code mostly for a IE only Intranet App. scott
/* --------------------------------------------------------------------
*Fade functions for Pop Up Help
*
* --------------------------------------------------------------------*/
var AlphaInterval = true;
var AlphaVal = 0;
var AlphaDir= '';
var AlphaElement;function fade(elemID,dir)
{ clearInterval(AlphaInterval);
AlphaDir = dir; // 'in' or 'out'
AlphaElement = document.getElementById(elemID);
document.getElementById("popHelp").style.display = "block";
AlphaInterval=setInterval("applyAlpha()",15);
} function setAlpha(elemContent) //var elemContent = document.getElementById("popHelpContent");
{
AlphaElement = elemContent
AlphaElement.style.filter = "alpha(Opacity=0)";
} function applyAlpha()
{
//AlphaElement.style.filter = "alpha(Opacity=100)";
if(AlphaDir == "in")
{
//in
if(AlphaVal <= 90) AlphaVal += 5;
AlphaElement.style.filter = "alpha(Opacity="+AlphaVal+")";
if(AlphaVal == 90)
{
clearInterval(AlphaInterval);
AlphaDir = '';
}
//
} else {
// out
if(AlphaVal != 0) AlphaVal += -5;
AlphaElement.style.filter = "alpha(Opacity="+AlphaVal+")";
if(AlphaVal <= 0)
{
clearInterval(AlphaInterval);
document.getElementById("popHelp").style.display = "none";
AlphaDir = '';
}
}
}
/* --------------------------------------------------------------------
*END PopUp Help
* --------------------------------------------------------------------*/
|
XtendScott
msg:3656360 | 2:12 pm on May 22, 2008 (gmt 0) |
Found Alpha/Opacity code for other browsers.
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity=opacity/100; // Older Mozilla and Firefox
obj.style.MozOpacity=opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity=opacity/100;
|
corodyne
msg:3656966 | 12:51 am on May 23, 2008 (gmt 0) |
Many thanks to everyone who responded. I'm relatively new to Javascript and everyone helped a great deal. Thanks again!
|
|
