www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] opacity for div element as modal dialog background

  1. #1
    Join Date
    Mar 2004
    Posts
    369

    resolved [RESOLVED] opacity for div element as modal dialog background

    I'm hoping to set the background of a modal dialog as semi-transparent. This works find in firefox 2 and 3:
    Code:
    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:
    Code:
    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?

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    Is this what you are looking for?
    http://www.w3schools.com/Css/tryit.a...s_transparency

  3. #3
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by skywalker2208 View Post
    That doesn't work in ie7 for me. I have version 7.0.5730.

  4. #4
    Join Date
    Mar 2004
    Posts
    369
    But seriously, no one has a solution?

  5. #5
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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

  6. #6
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by slaughters View Post
    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??

  7. #7
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    IE 7.0.5730 is the exact same version I am using.

  8. #8
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by slaughters View Post
    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:

    Code:
    	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 + ")";

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles