| Info zum Tutorial / was wird benötigt |
|---|
In diesem Tutorial wird Dir beschrieben, wie Du ein PopUp einfügst für z.b. einen TeamSpeak.Es können auch andere Inhalte hinterlegt werden. - TeamSpeak Logo (Grafik kann natürlich mit einer eigenen besetzt werden. ) Eine Online-Demo könnt Ihr Euch auf der DemoSeite anschauen. (Template mar_Forum rechts oben...) |
| Schritt für Schritt |
|---|
1. Lade Dir das TeamSpeak Logo und lege dieses im Ordner include/images/icons ab. 2. Öffne die index vom Design (Template) .Füge im head Bereich ( zwischen <head> und </head>) folgenden Code ein:
<style type="text/css">
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 10%;
left: 40%;
width: 300px;
height: 400px;
padding: 3px;
background-color: #ffffff;
border: 2px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #2f2f2f;
z-index:1002;
overflow: auto;
}
</style>
Füge nun gleich nach <body> folgendes ein:<div id="ts_pop" style=" right: 0px; width: 156px; position: absolute; top: 20px; height: 82px; z-index: 999;" >
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="include/images/icons/ts_logo.png" border="0"/></a></div>Bei einem eigenen Bild sollten die Maße width und height angepasst werden.Unter top kann der Abstand nach oben eingestellt werden.Füge nun über </body> folgendes ein: <div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><br>Close<br><br></a>
<!-- Anfang TS Code -->
HIER TS CODE REIN
<!-- Ende TS Code -->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><br>Close</a></div>
<div id="fade" class="black_overlay"></div>Anstelle von HIER TS CODE REIN kommt der TS Code rein.Nun sollte sich nach hochladen der neuen index rechts oben das TS Logo befinden.Bei klick drauf öffnet sich der Popup mit dem TS Fenster. |