CSS full screen div with transparent background

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ianhull
Forum Contributor
Posts: 310
Joined: Tue Jun 14, 2005 10:04 am
Location: Hull England UK

CSS full screen div with transparent background

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Choose the Right Board

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Inkyskin
Forum Contributor
Posts: 282
Joined: Mon Nov 19, 2007 10:15 am
Location: UK

Post by Inkyskin »

It works fine in FF when you scroll down, I take it that it must be an IE problem?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Post by kaszu »

As example, have a look at http://www.huddletogether.com/projects/ ... ightbox.js (function getPageSize).
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

Simple fix (For Firefox).

Code: Select all

position:fixed;
Last edited by Zoxive on Fri Dec 28, 2007 8:26 am, edited 1 time in total.
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Post by arjan.top »

ie6 does not support position:fixed
Post Reply