Window Popup - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Window Popup

Scripte > Listen Navigation
Popup Fenster mit PHP und Javascript

Ein Popup Fenster das sich als Info-Box in Textbereichen, als Navigationsboxen in Seitenleisten oder nach eigenen Bedürfnissen einsetzen lässt.
Der Einbau ist relativ einfach.
Die Boxen lassn sich in der Datei "popup-window.css" perfekt an die Homepage anpassen. Textpassagen oder Links werden nur im HTML-Code entsprechend eingegeben.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Download Button
x runter geladen
Demo Popup 1 anzeigen
Demo Popup 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj194_0/popup-window.css" />
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj194_0/jquery.js"></script>
<script src="wsX5Obj/Obj194_0/popup-window.js"></script>
Code für den <BODY> Bereich (Demo 1)
<!-- Breite width: [auto, 100px, 10em, etc.] und Position x-/y-Achse [100, -100, etc.] vom Popup-Fenster -->
<a href="#" onclick="Obj194_show('#Obj194_1', { parent: this, x: 150, y: 10, width: '400px' });
return false;">
Demo Popup 1 anzeigen
</a>
<div id="Obj194_1" class="Obj194_css">
<table class="Obj194_css">
<tr>
<td class="Obj194_css">
<div class="Obj194_css_head">
<img src="wsX5Obj/Obj194_0/close.gif" alt="" width="9" height="9" />Demo Popup 1
</div>
<div class="Obj194_css_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="Obj194_css_foot"></div>
</td>
</tr>
</table>
</div>
Code für den <BODY> Bereich (Demo 2)
<!-- Breite width: [auto, 100px, 10em, etc.] und Position x-/y-Achse [100, -100, etc.] vom Popup-Fenster -->
<a href="#" onclick="Obj194_show('#Obj194_2', { parent: this, x: 10, y: 30, width: 'auto' });
return false;">
Demo Popup 2 anzeigen
</a>
<div id="Obj194_2" class="Obj194_css">
<table class="Obj194_css">
<tr>
<td class="Obj194_css">
<div class="Obj194_css_head">
<img src="wsX5Obj/Obj194_0/close.gif" alt="" width="9" height="9" />Demo Popup 2 &nbsp;
</div>
<div class="Obj194_css_body">
<a href="Seite_1.html">Link-Name 1</a><br>
<a href="Seite_2.html">Link-Name 2</a><br>
<a href="Seite_3.html">Link-Name 3</a><br>
<a href="http://x5forum.home-wiekau.de" target="_blank">Website X5 - Helpsite</a>
</div>
<div class="Obj194_css_foot"></div>
</td>
</tr>
</table>
</div>
Code Datei "popup-windows.css"
html body div.Obj194_css { position: absolute; display: none; }
html body div.Obj194_css table.Obj194_css {  margin: 0px; border-collapse: collapse; }
html body div.Obj194_css td.Obj194_css { padding: 0px; }
html body div.Obj194_css div.Obj194_css_head {
border: 1px solid black;
border-width: 1px 1px 1px 1px;
padding: 2px 6px 2px 6px;
background: #802000;
}
html body div.Obj194_css div.Obj194_css_body {
font-family: tahoma, sans serif;
color: #000000;
border: 1px solid black;
border-width: 0px 1px 0px 1px;
padding: 6px 6px 0px 6px;
background: #E0E0E0;
}
html body div.Obj194_css div.Obj194_css_foot {
border: 1px solid black;
border-width: 0px 1px 1px 1px;
padding: 0px 0px 0px 0px;
background: #E0E0E0;
}
html body div.Obj194_css div.Obj194_css_head {
font: 900 14px "Trebuchet MS", Sans-Serif;
color: #FFFFFF;
cursor: default;
}
html body div.Obj194_css div.Obj194_css_head img { float: right; margin: 4px 0px 0px 1px; cursor: pointer; }
html body div.Obj194_css div.Obj194_css_foot { height: 6px; text-align: right; }
html body div.Obj194_css div.Obj194_css_foot a,
html body div.Obj194_css div.Obj194_css_foot a img {
display: inline-block;
width: 6px;
height: 6px;
border: none;
}
a:link { color: black; text-decoration: none; }
a:hover { color: green; text-decoration: underline; }
a:visited { color: black; text-decoration: none; }
a:active { color: green; text-decoration: none; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt