Top-Themen

Aktuelle Themen (A bis Z)

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, 4489 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
Webseiten werden als HTML angzeigt - können nicht aufgerufen werden
gelöst Frage von gabeBUWebbrowser8 Kommentare

Hallo Zusammen Seit kurzer Zeit habe ich ein seltsames Phänomen: Die Seiten Facebook und Youtube werden ab und zu ...

HTML
Seitenwechsel innerhalb einer div-Box in HTML+CSS
gelöst Frage von honeybeeHTML7 Kommentare

Hallo, ich habe mit dem HTML-Tag <div> und CSS folgendes Webseitenschema erstellt: siehe Screenshot unten. Meine Frage: Wenn ich ...

CMS
Normale HTML Webseite auf Joomla umstellen
gelöst Frage von gamerffCMS19 Kommentare

Ich habe mir vor kurzen eine Umfangreiche HTML Webseite angelegt. Jedoch ist das Verwalten dieser Seite ziemlich umstendlich, deswegen ...

Router & Routing
Layer 2 oder Layer 3 Switch
Frage von coppercableRouter & Routing6 Kommentare

Moin, eine kleine Frage, weils mir einfach nicht klar wird: Wir bekommen mehrere Uplinks, die wir gerne an einen ...

Neue Wissensbeiträge
Viren und Trojaner

Deaktivierter Keylogger in HP Notebooks entdeckt

Information von bitcoin vor 21 StundenViren und Trojaner1 Kommentar

Ein Grund mehr warum man Vorinstallationen der Hersteller immer blank bügeln sollte Der deaktivierte Keylogger findet sich im vorinstallierten ...

Router & Routing

Lets Encrypt kommt auf die FritzBox

Information von bitcoin vor 1 TagRouter & Routing

In der neuesten Labor-Version der FB7490 integriert AVM unter anderem einen Let's Encrypt Client für Zugriffe auf das Webinterface ...

Internet

Was nützt HTTPS, wenn es auch von Phishing Web-Seiten genutzt wird

Information von Penny.Cilin vor 4 TagenInternet17 Kommentare

HTTPS richtig einschätzen Ob man eine Webseite via HTTPS aufruft, zeigt ein Schloss neben der Adresse im Webbrowser an. ...

Webbrowser

Bugfix für Firefox Quantum released - Installation erfolgt teilweise nicht automatisch!

Erfahrungsbericht von Volchy vor 5 TagenWebbrowser8 Kommentare

Hallo zusammen, gem. dem Artike von heise online wurde mit VersionFirefox 57.0.1 sicherheitsrelevante Bugs behoben. Entgegen der aktuellen Veröffentlichung ...

Heiß diskutierte Inhalte
Batch & Shell
Trusted Sites für alle User auf dem PC einpflegen
Frage von xXTaKuZaXxBatch & Shell12 Kommentare

Aufgabestellung: Es sollen auf 1 PC (bzw. mehreren PCs) vertrauenswürdige Sites per Powershell eingetragen werden, die für alle User ...

Windows 10
Probleme mit Dateien, deren Pfad + Dateiname länger als 256 Zeichen sind
Frage von FalaffelWindows 1011 Kommentare

Guten Tag, unter Windows 10 scheint es immer noch das Problem zu geben, dass der Pfad + Dateiname einer ...

Vmware
DOS 6.22 in VMWare mit CD-ROM
gelöst Frage von hesperVmware10 Kommentare

Hallo zusammen! Ich hab ein saublödes Problem. Es ist eine VMWare mit DOS 6.22 zu erstellen auf dem ein ...

Microsoft Office
Outlook 2016 - Makro startet nicht über Knopf im Menüband
Frage von ZunarasMicrosoft Office9 Kommentare

Schönen guten Tag! ich brauche wieder einmal Hilfe. Ich möchte gerne von Office 2010 32bit auf 2016 64bit wechseln ...