✔ Transparentes Div über den ganzen Inhalt darstellen

W

Wilde

Grünschnabel
Hallo zusammen,

habe gerade folgendes Szenario, bei welchem ich nicht weiterkomme:

Es existiert ein Div mit irgendeinem Inhalt. Über diesem Div liegt ein weiteres Div (z-index), welches über einen Link (onclick) ein weiteres Div zeigen bzw ausblenden kann. Das vom Event abhängige Div soll zwischen den beiden anderen genannten Divs liegen und außerdem transparent sein. Bis hierhin ist alles iO.

Wenn ich jetzt jedoch in FF den Event auslöse, dann erhalte ich immer ein transparentes Div, welches genau die Höhe des bodys (> parent) hat. In IE6 wird nach auslösen des Links, das transparente Div über den kompletten Inhalt gelegt. FF verhält sich im Gegensatz zum IE hier CSS-konform, jedoch hätte ich gerne, dass auch im FF das transparente Div über den ganzen Inhalt gelegt wird. Der Effekt, welchen ich erreichen möchte, geht in Richtung Lightbox

Übrigens bevor ich´s vergesse, dass Div mit dem Link hat eine fixe Position. D.h. es steht immer an der gleichen Stelle. Hier gibt es im unten aufgeführten Code einen kleinen Workaround für den IE... Die fixe Position des Divs hat jedoch nichts mit dem "zu kleinen" transparenten Div im FF zu tun.


Hier der Beispielcode, welcher das Szenario abbildet:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>

	<meta http-equiv="cache-control" content="no-cache"> 
	<meta http-equiv="pragma" content="no-cache"> 

	<title>Content</title>

	<style type="text/css">

		* {
			margin:0;
			padding:0;
		}

		html, body {
			height:100%;
		}
		
		#content {
			width:800px; 
			height:1000px;
			background-color:yellow;
		}

		#link {
			top:100px;
			left:100px;
			height:100px;
			width:100px;
			z-index: 2;
			position: fixed;
			background-color:red;
		}

		 #transparentLayer {
			position:absolute;
			background: black;
			
			margin:0;
			padding:0;

			top: 0;
			left: 0;
			
			width:100%;
			height:100%;
			
			filter:alpha(opacity=50);
			-moz-opacity:0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		}  
	</style>

	<script type="text/javascript">
	
		var isShown = false;

		function showTransparentLayer()
		{
			var div = document.getElementById('transparentLayer');
			if (!isShown)
			{
				div.style.visibility = 'visible';
				isShown = true;
			}
			else
			{
				div.style.visibility = 'hidden';
				isShown = false;
			}
		}
		
		/* Workaround position:fixed im IE */
		function move_box() {  
			var offset = 100;
			var element = document.getElementById('link');  
			element.style.top = (document.documentElement.scrollTop + offset) + 'px';  
		} 
	</script>

</head>

<body>

	<div id="content"></div>

 	<div id="link"><a href="#" onclick="showTransparentLayer();">Link</a></div>

 	<div id="transparentLayer" style="visibility:hidden"></div>
	
	<!-- Workaround position:fixed im IE  -->
	<!--[if lt IE 7]>  
   	<style type="text/css">  
     	     #link {  
     	         position: absolute;  
          	}	  
        </style>  
        <script type="text/javascript">  
   		window.setInterval(move_box, 20);  
  	</script>  
   	<![endif]-->

</body>
</html>

Über eure Hilfe würde ich mich freuen! :)

Viele Grüße
Wilde
 
Hi,

positioner #transparentLayer fixed, denn seine Höhe wird im Viewport nie zunehmen bzw. bis zum unteren Fensterrand reichen, wenn sich die Seite nach unten scrollen lässt.

mfg Maik
 
Hi Maik,

Mensch vielen Dank für den Tip!! Mal wieder vor lauter Bäumen den Wald nicht mehr gesehen...

Also ich habe den Code jetzt wie folgt angepasst:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>

	<meta http-equiv="cache-control" content="no-cache"> 
	<meta http-equiv="pragma" content="no-cache"> 

	<title>Content</title>

	<style type="text/css">

		* {
			margin:0;
			padding:0;
		}

		html, body {
			height:100%;
		}
		
		#content {
			width:800px; 
			height:1000px;
			background-color:yellow;
		}

		#link {
			top:100px;
			left:100px;
			height:100px;
			width:100px;
			z-index: 2;
			position: fixed;
			background-color:red;
		}

		 #transparentLayer {
			position:fixed;  /* <- NEU */
			background: black;
			
			margin:0;
			padding:0;

			top: 0;
			left: 0;
			
			width:100%;
			height:100%;
			
			filter:alpha(opacity=50);
			-moz-opacity:0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		}  
	</style>

	<script type="text/javascript">
	
		var isShown = false;

		function showTransparentLayer()
		{
			var div = document.getElementById('transparentLayer');
			if (!isShown)
			{
				div.style.visibility = 'visible';
				isShown = true;
			}
			else
			{
				div.style.visibility = 'hidden';
				isShown = false;
			}
		}
		
		/* Workaround position:fixed im IE */
		function move_box() {  
			var offset = 100;
			var element = document.getElementById('link');  
			element.style.top = (document.documentElement.scrollTop + offset) + 'px';  
		} 
	</script>

</head>

<body>

	<div id="content"></div>

 	<div id="link"><a href="#" onclick="showTransparentLayer();">Link</a></div>

 	<div id="transparentLayer" style="visibility:hidden"></div>
	
	<!-- Workaround position:fixed im IE  -->
	<!--[if lt IE 7]>  
   	<style type="text/css">  
     	       #link {  
     	          position: absolute;  
       	       }
		#transparentLayer {  /* <- NEU */
     	          position: absolute;  
          	}
	</style>  
        <script type="text/javascript">  
   		window.setInterval(move_box, 20);  
  	</script>  
   	<![endif]-->

</body>
</html>

Jetzt geht´s im FF und IE6.

Viele Grüße
Wilde
 
Den position:fixed-Hack für IE6 würde ich so lösen:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-28" />

        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma" content="no-cache" />

        <title>Content</title>

        <style type="text/css">

                * {
                        margin:0;
                        padding:0;
                }

                html, body {
                        height:100%;
                }

                #content {
                        width:800px;
                        height:1000px;
                        background-color:yellow;
                }

                #link {
                        top:100px;
                        left:100px;
                        height:100px;
                        width:100px;
                        z-index: 2;
                        position: fixed;
                        background-color:red;
                }

                 #transparentLayer {
                        position:fixed;
                        background: black;

                        margin:0;
                        padding:0;

                        top: 0;
                        left: 0;

                        width:100%;
                        height:100%;

                        filter:alpha(opacity=50);
                        -moz-opacity:0.5;
                        -khtml-opacity: 0.5;
                        opacity: 0.5;
                        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
                }
        </style>

        <script type="text/javascript">

                var isShown = false;

                function showTransparentLayer()
                {
                        var div = document.getElementById('transparentLayer');
                        if (!isShown)
                        {
                                div.style.visibility = 'visible';
                                isShown = true;
                        }
                        else
                        {
                                div.style.visibility = 'hidden';
                                isShown = false;
                        }
                }
        </script>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE7.js"></script>
<![endif]-->

</head>

<body>

        <div id="content"></div>

         <div id="link"><a href="#" onclick="showTransparentLayer();">Link</a></div>

         <div id="transparentLayer" style="visibility:hidden"></div>

</body>
</html>

Quelle: http://code.google.com/p/ie7-js/

Vorteil: Das Script fixt noch weitere bekannte Bugs im IE6 :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück