Results 1 to 3 of 3

Thread: Greyed Background with popup layer

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Greyed Background with popup layer

    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.)

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    See if adding highlighted on dhtmlwindow.js helps:
    Code:
    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
    },
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

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