login  Naam:   Wachtwoord: 
Registreer je!
 Forum

overlay div

Offline gerits - 03/06/2008 16:55
Avatar van geritsLid Hallo,

ik ben op zoek naar een manier om een div over heel mijn venster te krijgen zodat men niet meer aan de onderliggende divs kan.

eigenlijk zoiets als bij lightbox gebeurt, waar heel het scherm zwart-transparant wordt en men op niks meer ken klikken buiten de foto.

Hoe krijg ik zo een zwart-transparante laag op mijn scherm?

groeten
Ruben

7 antwoorden

Gesponsorde links
Offline Koen - 03/06/2008 17:03
Avatar van Koen PHP expert zwarte div met width 100% & height 100% & opacity 30% ?
Offline Ibrahim - 03/06/2008 21:14
Avatar van Ibrahim PHP expert Bij mij werkt het niet zo goed, alleen de eerste gedeelte van me scherm wordt gevuld. Als ik naar beneden scroll, dan is daar niet bedekt.
Offline gerits - 04/06/2008 10:20
Avatar van gerits Lid Ik heb nog iets anders geprobeerd wat wel is gelukt.. Als je volgende doet:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #overlay {
  2.    position: fixed;
  3.    top: 0px;
  4.    bottom: 0px;
  5.    left: 0px;
  6.    right: 0px;
  7.  
  8.    background-color: black;
  9.    opacity: .40;
  10. }


en dat werkt bij mij en IE7, firefox, safari, opera... Niet getest in IE6
Bedankt door: CDNC
Offline Godlord - 04/06/2008 13:33
Avatar van Godlord PHP gevorderde In IE6 werkt het niet, ook niet als je de andere opacity methoden gebruikt. In IE7 werkt het wel indien je "filter: alpha(opacity=40);" gebruikt.


M.v.g. Godlord.
Offline Ontani - 04/06/2008 13:46
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 ie7 ondersteund de opacity property, ie 6 niet
Offline Godlord - 04/06/2008 13:54
Avatar van Godlord PHP gevorderde Ik zie het, het werkt echt goed . Niet offensief bedoelt .

Code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .overlay {
  2. 	position: fixed;
  3. 	top: 0px;
  4. 	left: 0px;
  5. 	bottom: 0px;
  6. 	right: 0px;
  7. 	background: #000000;
  8. 	filter: alpha(opacity=40);
  9. 	opacity: .4;
  10. 	color: #FFFFFF;
  11. }


Resultaat: http://i129.pho...filter.png


Code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .overlay {
  2. 	position: fixed;
  3. 	top: 0px;
  4. 	left: 0px;
  5. 	bottom: 0px;
  6. 	right: 0px;
  7. 	background: #000000;
  8. 	filter: alpha(opacity=40);
  9. 	opacity: .4;
  10. 	color: #FFFFFF;
  11. }


Resultaat:
http://i129.pho...filter.png


M.v.g. Godlord.
Offline Ontani - 04/06/2008 15:14
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Ik los het altijd met javascript op, met css zit je nooit goed ivm max-width, max-height, margins, paddings enz...

http://www.bo-djenna.be/paginas/kalender/

is gewoon het framework van mootools geladen en voor de rest is het:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function showEvent() {
  2. 	height = 0;
  3. 	if(window.getScrollHeight() > window.getHeight()) {
  4. 		height = window.getScrollHeight()
  5. 	} else {
  6. 		height = window.getHeight();
  7. 	}
  8. 	$$('.event').each(function(element) {
  9. 		element = $(element);
  10. 		element.setStyle('height',height);
  11. 		element.effect('opacity').start(0.8);
  12. 	});
  13. });
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.197s