Frage ist gelöstHTML (DIV) Layer über komplette Webseite
07.02.2012
21:21:13 Uhr369 Aufrufe
4 Antworten
21:21:13 Uhr
4 Antworten
Noch nicht bewertet
Hallo,
ich möchte gerne nach dem Klick auf einen Button einen grauen und halb durchsichtigen Layer über die gesamte Webseite anzeigen, auf dem eine weiße Infobox mit einem Text zu sehen ist.
Das Problrm ist jedoch, dass egal wie hoch (height) die Seite ist, der Layer immer nur im oberen Sichtbereich angezeigt wird. Ich möchte also, dass egal an welcher STelle man sich auf der Webseite befindet, und man den Button drückt, dass sich an genau dieser STelle der Layer entfaltet und die Infobox mittig zu sehen ist.
Man kann sich das ganze vllt besser vorstellen, wenn man sich dieses vereinfachte Beispiel anschaut.
Wenn man den Button unterhalt des Sichtberieches klickt, öffnet sich der Layer trotzdem ganz oben.
hat jemand einen Tipp??
Grüße
ich möchte gerne nach dem Klick auf einen Button einen grauen und halb durchsichtigen Layer über die gesamte Webseite anzeigen, auf dem eine weiße Infobox mit einem Text zu sehen ist.
Das Problrm ist jedoch, dass egal wie hoch (height) die Seite ist, der Layer immer nur im oberen Sichtbereich angezeigt wird. Ich möchte also, dass egal an welcher STelle man sich auf der Webseite befindet, und man den Button drückt, dass sich an genau dieser STelle der Layer entfaltet und die Infobox mittig zu sehen ist.
Man kann sich das ganze vllt besser vorstellen, wenn man sich dieses vereinfachte Beispiel anschaut.
Wenn man den Button unterhalt des Sichtberieches klickt, öffnet sich der Layer trotzdem ganz oben.
hat jemand einen Tipp??
01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 02.
<html> 03.
<HEAD> 04.
<TITLE>Test</TITLE> 05.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 06.
07.
08.
<style type="text/css"> 09.
10.
html, body { 11.
margin: 0; 12.
padding: 0; 13.
height: 100%; 14.
} 15.
16.
17.
#layer 18.
{ 19.
z-index:90; 20.
opacity:0.5; 21.
filter:alpha(opacity=50); /* For IE8 and earlier */ 22.
-moz-opacity:.5; 23.
background-color:#000000; 24.
position:absolute; 25.
min-height: 100%; 26.
height:auto !important; 27.
height:100%; 28.
overflow: hidden !important; 29.
top:0; 30.
left:0; 31.
width:100%; 32.
margin: auto; 33.
} 34.
35.
#info_div 36.
{ 37.
z-index:99; 38.
background-color:#ffffff; 39.
position:absolute; 40.
height:300px; 41.
width:400px; 42.
top:50%; 43.
left:50%; 44.
margin-left:-150px; 45.
margin-top:-200px; 46.
} 47.
48.
</style> 49.
50.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 51.
<script type="text/javascript"> 52.
53.
var layer_and_box = "<div id='layer'></div>" + 54.
"<div id='info_div'>" + 55.
"<h1>Infobox..</h1>" + 56.
"</div>"; 57.
58.
function display_layer() { 59.
jQuery('body').prepend(layer_and_box); 60.
} 61.
62.
63.
64.
</script> 65.
</head> 66.
<body> 67.
68.
69.
<input type='button' value='show layer' onclick='javascript:display_layer()'> 70.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 71.
<input type='button' value='show layer' onclick='javascript:display_layer()'> 72.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 73.
<input type='button' value='show layer' onclick='javascript:display_layer()'> 74.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 75.
<input type='button' value='show layer' onclick='javascript:display_layer()'> 76.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 77.
<input type='button' value='show layer' onclick='javascript:display_layer()'> 78.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 79.
<input type='button' value='show layer' onclick='javascript:display_layer()'> 80.
81.
82.
</body> 83.
</html>Grüße
nxclass schreibt am 07.02.2012 um 22:40:40 Uhr
was genau meinst du mit "einen Knoten dem body hinzufügen"?
mit *$('body').prepend();* fügst Du doch HTML Knoten (nodes) zu deiner HTML Struktur hinzu - aber das ist ja nicht das Problem. Die Positionierung willst Du ja scheinbar nicht anhand des Dokuments (BODY) sondern des Browsers ausrichten.
