Page 1 of 1

CSS full screen div with transparent background

Posted: Thu Dec 27, 2007 11:58 pm
by ianhull
Hi guys, I am trying to achieve a css div effect which makes all the page transparent even if the page has scroll bars.


http://jquery.com/demo/thickbox/

has several different examples, however, there seems to be too much code to go through for one simple effect.

The following code works great exept for the height, I can only get it to fill 100% of the screen height but if there is scrollbars it does not fill the full screen inclding scoll bars.

Code: Select all

#masterPopup {
	width: 100%;
	background-color: #666666;
	position: absolute;
	z-index: 200;
	display: none;
	opacity: 0.5;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	overflow: visible;
	height: 130%;
}
my sample is at
http://www.proctorcarsales.co.uk/used-c ... yshire.php

After clicking on a vehicle you will see what I mean.

I was looking at

Code: Select all

document.body.scrollHeight
But cannot work it out,

Does anyone have any ideas how I would achieve this?

Thanks in advance.

Choose the Right Board

Posted: Fri Dec 28, 2007 3:24 am
by s.dot
Moved to Client Side.
[url=http://forums.devnetwork.net/viewtopic.php?t=30037]Forum Rules[/url] Section 1.1 wrote:1. Select the correct board for your query. Take some time to read the guidelines in the sticky topic.

Posted: Fri Dec 28, 2007 3:37 am
by Inkyskin
It works fine in FF when you scroll down, I take it that it must be an IE problem?

Posted: Fri Dec 28, 2007 6:48 am
by kaszu
As example, have a look at http://www.huddletogether.com/projects/ ... ightbox.js (function getPageSize).

Posted: Fri Dec 28, 2007 8:06 am
by Zoxive
Simple fix (For Firefox).

Code: Select all

position:fixed;

Posted: Fri Dec 28, 2007 8:19 am
by arjan.top
ie6 does not support position:fixed