[RESOLVED] opacity for div element as modal dialog background

[sneakyimp]

I'm hoping to set the background of a modal dialog as semi-transparent. This works find in firefox 2 and 3:

if (e.filters) {
		e.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + this.iOpacity + ')';
} else if (e.style) {
	e.style.opacity = (this.iOpacity/100);
} else {
	alert('Unable to set opacity of modal dialog background.');
}

however, ie7 chokes on it and fails to complete the function in which that code lives. the e.filters reference appears to be the problem.

I have also tried this to no avail:

e.style.opacity = (this.iOpacity / 100);
e.style.MozOpacity = (this.iOpacity / 100);
e.style.KhtmlOpacity = (this.iOpacity / 100);
e.style.filter = "alpha(opacity=" + this.iOpacity + ")";

Can anyone give me a browser-proof means of setting opacity for an HTML element?

[skywalker2208]

Is this what you are looking for?
http://www.w3schools.com/Css/tryit.a...s_transparency

[sneakyimp]

Is this what you are looking for?
http://www.w3schools.com/Css/tryit.a...s_transparency

That doesn't work in ie7 for me. I have version 7.0.5730.

[sneakyimp]

But seriously, no one has a solution?

[slaughters]

So you are saying that when you go to:
http://www.w3schools.com/Css/tryit.a...s_transparency

You do *NOT* see a semi-transparent div layered on top of a picture of purple flowers ?

I do. In IE7, Firefox 3 and Chrome

[sneakyimp]

You do *NOT* see a semi-transparent div layered on top of a picture of purple flowers ?

I do. In IE7, Firefox 3 and Chrome

I do NOT in IE 7.0.5730. The text box is all white -- not transparent at all. It looks great in firefox and safari. WTF??

[slaughters]

IE 7.0.5730 is the exact same version I am using.

[sneakyimp]

IE 7.0.5730 is the exact same version I am using.

I found the problem. I have my security settings REALLY cranked up in IE7 and apparently ActiveX must be permitted for opacity to work. So stupid IMHO. Problem solved. This is working for me:

	e.style.opacity = (this.iOpacity / 100);
	e.style.MozOpacity = (this.iOpacity / 100);
	e.style.KhtmlOpacity = (this.iOpacity / 100);
	e.style.filter = "alpha(opacity=" + this.iOpacity + ")";