How do I dim/undim a background using javascript but with an XML file?

Here is my sample page: http://jsgraphicdesign.com/CEI/
Here are the scripts I have in the head:

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=310,left = 365,top = 357');");
}

// End -->
</script>

And this one I grabbed from http://www.hunlock.com/blogs/snippets:_howto_grey-out_the_screen.

<script language="javascript">
function grayOut(vis, options) {
// Pass true to gray out screen, false to ungray
// options are optional. This is a JSON object with the following (optional) properties
// opacity:0-100 // Lower number = less grayout higher = more of a blackout
// zindex: # // HTML elements with a higher zindex appear on top of the gray out
// bgcolor: (#xxxxxx) // Standard RGB Hex color code
// grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order. Pass only the properties you need to set.
var options = options || {};
var zindex = options.zindex || 50;
var opacity = options.opacity || 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark=document.getElementById('darkenScreenObject');
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject'); // Get the object.
}
if (vis) {
// Calculate the page width and height
if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
var pageWidth = document.body.scrollWidth+'px';
var pageHeight = document.body.scrollHeight+'px';
} else if( document.body.offsetWidth ) {
var pageWidth = document.body.offsetWidth+'px';
var pageHeight = document.body.offsetHeight+'px';
} else {
var pageWidth='100%';
var pageHeight='100%';
}
//set the shader to cover the entire page and make it visible.
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= pageWidth;
dark.style.height= pageHeight;
dark.style.display='block';
} else {
dark.style.display='none';
}
}
</script>


In the XML file, call the javascript like this:
<item link="javascriptopUp('clips/Gully.html');javascript:grayOut(true, 'opacity:70')">

This brings up the pop up and dims the screen, but it does not undim the screen when I close out of the pop up window.

I'm not a javascript guru. Is there anyone out there who can tell me what to do???

Thank you in advance!
Jodi

 

Yeah, because grayOut is not being called again (with "false") to remove it. This is the link from the example page:

<A HREF="#" onclick="grayOut(true); alert('Example!'); grayOut(false); return false;" class='popup'>Example</A>

Code (markup):

So, applying that to your link gives:

<item link="javascript:popUp('clips/Gully.html'); javascript:grayOut(true, 'opacity:70'); javascript:grayOut(false); javascript:return false;">

Code (markup):

Hope that works. I don't know XML or Flash, so I'm not sure if you really need "javascript:" in front of every statement

 

I greatly appreciate your willingness to help!

I changed the script to the following and it didn't do anything. It didn't call the popup, and it didn't dim the screen:
<item link="javascriptopUp('clips/Gully.html');javascript:grayOut(true, 'opacity:70');javascript:grayOut(false);javascript:return false;">

I also tried this, which called the popup but didn't dim the screen:
<item link="javascriptopUp('clips/EngagementParty.html');javascript:grayOut(true, 'opacity:70');javascript:grayOut(false, 'return false')">

Is there anything else you might suggest?
Thanks again!
Jodi

 

Where is that line being used? I am having trouble finding it. Maybe this will work:

<item link="javascript:popUp('clips/Gully.html'); grayOut(true, 'opacity:70'); grayOut(false);">

Code (markup):

 

Bummer... that didn't even work. I just don't get it.
Here's the location of the XML file if that's what you mean: jsgraphicdesign.com/CEI/scroller.xml

 

Ah, silly me Forgot that the example uses an alert box, which is a model dialog that pauses the code.
A normal window is not modal, so the background is opened and closed very quickly.

We can use showModalDialog but that is only supported by IE, Firefox 3, and possibly Chrome.

function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.showModalDialog(URL, '" + id + "', 'dialogwidth:550px;dialogheight:310px;dialogleft:365px;dialogtop:357px;');");


<item link="javascript:grayOut(true, 'opacity:70');popUp('clips/Gully.html');grayOut(false);">
}

Code (markup):

At this point, I think it may be worth changing to another lightbox rather than put up with this dodgy solution.

 

There's hope now! I modified the code like you suggested and the screen dims when I click the link. When the pop-up appears, the screen un-dims immediately... it doesn't wait until I close out the pop-up.

Is there something I can change to correct that?

Thanks for your help so far!

 

Never mind!!! It's working!!!! Thank you!!!!!!!!

 

Thanks jojosaint, but I'm afraid it's not so good in other browsers
There are scroll bars on the window in Safari. Worse still, the window does not even open in Opera.

This should allow Opera to open a window, but it won't have a grayed out background.

function popUp(URL) {
day = new Date();
id = day.getTime();
if (window.showModalDialog) {
	eval("page" + id + " = window.showModalDialog(URL, '" + id + "', 'dialogwidth:550px;dialogheight:310px;dialogleft:365px;dialogtop:357px;');");
} else {
	eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=310,left=365,top=357');");
}
}

Code (markup):

 

Good morning! Thank you for the modified code. You've been a real gem and I appreciate all your great help.

 

You're welcome Just a pity I couldn't find you a better solution. Oh well, maybe next time!