Thema: Mambo PopUp Login (Tutorial / deutsch)

Tutorial:
Wie erstelle ich mir in Mambo ein PopUp Login (Anmelden / Abmelden)?

Dazu benötigen wir folgende Dinge:

a) Ein Javascript, welches das PopUp öffnet
b) Eine DIV - Box, welches die Loginbox beinhaltet
c) Einen Link zum "Öffnen und Schliessen" unseres PopUps....

Zuerst schreiben wir folgendes Javascript in den Headbereich unserer Index.php (Templateordner): (Wichtig: Als Javascript deklarieren)


function toggleBox(szDivID, iState) // 1 sichtbar, 0 versteckt
{
if(document.layers) // NN4
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) // gecko(NN6) + IE5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) //IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}

Als Zweites kopieren wir folgenden Quelltext in den Bodybereich unserer Index.php: (Templateordner) Es handelt sich hierbei um einen DIV der eine Tabelle beinhaltet, welche das "Inset" Modul, Adminlink und ein "Fenster schliessen-Button" beinhaltet. In das Inset-Modul müssen wir dann per Mambo Admin das Modul "Login" laden.

<div id="LoginBox">
<table>
<tr>
<td colspan="2">
<?php mosLoadModules( 'inset' ); ?>
</td>
</tr>
<tr>
<td width="50%">
<a href="administrator/index.php">
<img src="images/M_images/con_info.png" width="16" height="16" border="0" />
<font size="1"><strong>Admin</strong></font>
</a>
</td>
<td width="50%" align="right">
<a href="#" onClick="toggleBox('LoginBox',0); return false;">
<img src="images/cancel_f2.png" width="20" height="20" border="0" />
</a>
</td>
</tr>
</table>
</div>

(Tabelle kann natürlich erweitert werden, mit zb. Statistik-Modul, Who´s Online etc.)

Nun brauchen wir irrgendwo auf der Website noch einen Link der unser PopUp - Fenster öffnet. Das kann man als ganz normalen Link machen oder wie zb. unter: www.die-hand-gottes.com als Imagelink.

Wichtig ist nur das folgender Code als Aufruf des Links verwendet wird:

<a href="#" onClick="toggleBox('LoginBox',1); return false;"></a>

Nun müssen wir nur noch die CSS-Datei unseres Templates mit einem kleinen Eintrag erweitern: (ein DIV mit absoluter Position, der auf Versteckt (Hidden) gesetzt ist und durch unserer Script sichtbar gemacht wird, wenn man den Link drückt.)

#LoginBox {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
visibility: hidden;
border: 1px solid;
background-color: #ffffff;
}

(DIV ist beliebig erweiterbar, zb. in der Breite, Hintergrundfarbe etc.)

So und fertig... eigentlich nicht schwer... falls jedoch Fragen entstehen sollten, postet sie hier hinein. Ich versuche sie zu beantworten.

drrmx
www.mediacream.de