Greyed Background with popup layer

[dmanager]

1) Script Title:
I'm using DHTML Window

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

3) Describe problem:

I can use dhtml window just fine to pop open a dhtml window in the middle of the screen. Great script.

I'd like to "grey out" the rest of the screen so that the popup is more apparent. Is there a way to accomplish this?

I assume I'd just want to somehow show a layer, with an opacity set to about 50%, just behind the dhtml window. But I don't know how to accomplish this (while using dhtml window).

(As a pseudo solution, I've made the outer border of the dhtml window 500 pixels, which basically blacks out the rest of the screen. Since you can't set an opacity for borders, this isn't my ideal solution, as I want the rest of the screen to partially show through.)

[rangana]

See if adding highlighted on dhtmlwindow.js helps:

open:function(t, contenttype, contentsource, title, attr, recalonload){
	var d=dhtmlwindow //reference dhtml window object
	function getValue(Name){
		var config=new RegExp(Name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
		return (config.test(attr))? parseInt(RegExp.$1) : 0 //return value portion (int), or 0 (false) if none found
	}
	if (document.getElementById(t)==null) //if window doesn't exist yet, create it
		t=this.init(t) //return reference to dhtml window div
	else
		t=document.getElementById(t)
	this.setfocus(t)
	t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window
	var xpos=getValue("center")? "middle" : getValue("left") //Get x coord of window
	var ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window
	//t.moveTo(xpos, ypos) //Position window
	if (typeof recalonload!="undefined" && recalonload=="recal" && this.scroll_top==0){ //reposition window when page fully loads with updated window viewpoints?
		if (window.attachEvent && !window.opera) //In IE, add another 400 milisecs on page load (viewpoint properties may return 0 b4 then)
			this.addEvent(window, function(){setTimeout(function(){t.moveTo(xpos, ypos)}, 400)}, "load")
		else
			this.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")
	}
	t.isResize(getValue("resize")) //Set whether window is resizable
	t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars
	t.style.visibility="visible"
	t.style.display="block"
	t.contentarea.style.display="block"
	t.moveTo(xpos, ypos) //Position window
	t.load(contenttype, contentsource, title)
	if (t.state=="minimized" && t.controls.firstChild.title=="Restore"){ //If window exists and is currently minimized?
		t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[0]) //Change "restore" icon within window interface to "minimize" icon
		t.controls.firstChild.setAttribute("title", "Minimize")
		t.state="fullview" //indicate the state of the window as being "fullview"
	}
document.body.style.opacity='.5'; // for FF
document.body.style.filter='alpha(opacity=50)'; // for IE
document.body.style.background='#555'; // The background color of body

return t
},

[dmanager]

Thanks for the help. That's pretty unintuitive for me, that setting the opacity of the background would have that effect. I'd think the background opacity wouldn't have an affect on the main part of the page, as the background is behind the main part of the page. But it works!!!

Unfortunately, after adding the code, I found that I can't use it, as I have video in the dhtml window that pops up, and the opacity think causes the video to grind to a halt in IE. Go figure.

Thanks again for the knowledge though, I'll definitely use this idea in the future on more static dhtml popups.