Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

HTML (DIV) Layer über komplette Webseite

Frage Entwicklung Webentwicklung

Mitglied: bootmeup

bootmeup (Level 1) - Jetzt verbinden

07.02.2012, aktualisiert 21:22 Uhr, 4430 Aufrufe, 4 Kommentare

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??

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
Mitglied: nxclass
07.02.2012 um 22:29 Uhr
Wenn Du ein Knoten dem BODY hinzufügst, dann beziehen sich deine CSS Angaben (height und top) auch darauf, also auf das gesamte Dokument.

EDIT: ändere beide angaben in:
01.
position: fixed;
Bitte warten ..
Mitglied: bootmeup
07.02.2012 um 22:32 Uhr
was genau meinst du mit "einen Knoten dem body hinzufügen"?
Bitte warten ..
Mitglied: nxclass
07.02.2012 um 22: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.
Bitte warten ..
Mitglied: bootmeup
07.02.2012 um 22:44 Uhr
genau das ist die lösung.... "position: fixed"...
ich danke dir vielmals!!!
Bitte warten ..
Ähnliche Inhalte
Webbrowser
Webseite am Server zu extern zu Verfügung stellen - wie ftp? (10)

Frage von grillinator95 zum Thema Webbrowser ...

Datenbanken
gelöst MS SQL Abfragen und Formulare in Webseite einbinden (3)

Frage von Machello zum Thema Datenbanken ...

JavaScript
gelöst Datumabhängiger Text in HTML anzeigen (4)

Frage von adm2015 zum Thema JavaScript ...

Neue Wissensbeiträge
RedHat, CentOS, Fedora

Fedora, RedHat, Centos: DNS-Search Domain setzen

(1)

Tipp von Frank zum Thema RedHat, CentOS, Fedora ...

Drucker und Scanner

Samsung SL-M4025ND, firmware update und (kompatible) Tonerkassetten

(1)

Erfahrungsbericht von markus-1969 zum Thema Drucker und Scanner ...

Router & Routing

PfSense auf Supermicro Intel Xeon D-15x8 SoC Bare Bone

Tipp von Dobby zum Thema Router & Routing ...

Heiß diskutierte Inhalte
Windows 10
Windows für Privatanwender "nicht mehr handhabbar" (26)

Frage von FA-jka zum Thema Windows 10 ...

LAN, WAN, Wireless
Brauche Hilfe: Mit (schnellem) WLAN Strecke überbrücken (23)

Frage von pierrehansen zum Thema LAN, WAN, Wireless ...

Basic
Programmierung von Windows Programmen (10)

Frage von Ghost108 zum Thema Basic ...