Popup-Fenster integrieren

 

One.com Forum und Tutorial

Lösungen sind meist ganz einfach - wenn man sie kennt

 

Popup-Fenster integrieren

 

 

Es kommt immer mal wieder vor, das man bestimmte Inhalte beim Klicken auf einen Link, in einem separaten Fenster, in einem sogenannten Popupfenster darstellen möchte. So sieht der Besucher noch die eigentliche Webseite, wird also im Focus gehalten und kann kurz die gewünschte Zusatzinfo zur Kenntnis nehmen, oder ein Formular ausfüllen oder ähnliches.

Mit dem Schliessen des Popup-Fensters steht er aber gleich wieder auf der richtigen Position und kann weiterlesen.

 

Das kann man am einfachsten mit Javascript umsetzen. Der Code sieht grundsätzlich folgendermaßen aus:

 

 

<a href="http:../baustelle.html" onClick="window.open('http:../baustelle.html', 'Bs', 'height=460,width=1020,scrollbars=yes')" target="Bs">Baustellenseite anzeigen</a>

 

 

 

Erläuterung: An zwei Stellen einfach die richtige URL eintragen. Ist die Seite in der obersten Hierarchie angeordnet (Standard) reicht die Form http:"../NamederAnzuzeigendenSeite.html". Wer sicher gehen will, trägt einfach die komplette URL ein. (http://domain.html-datei)

 

Mit dem Eintrag“Bs“ wird die Verknüpfung zwischen dem Link und dem neuen Fenster hergestellt. "Height" und "width" geben die Größe vor und mit scrollbars=yes kann man die Scrollbalken bei Bedarf einschalten. Ohne scrollbars=yes" werden keine scrollbars angezeigt. Am einfachsten ist es natürlich, dass Fenster so groß zu definieren, dass man alles sehen kann.

Aus eigenen Testerfahrungen sollte das Fenster 120px breiter sein als das anzuzeigende Template. Werden die Angaben für width und height weggelassen, öffnet sich ein neues Fenster in Bildschirmgröße.

 

Die Integration eines solchen Popup-Fensters erfolgt mit der Code-Komponente. Die Integration eines solchen Links in den Fliesstext ist nicht ohne weiteres möglich, weil man einem Text zwar einen einfachen Link aber keinen Code zuweisen kann. Da kannst natürlich im Fliesstext eine Lücke lassen und dann eine Code-Komponente so darüberlegen, das der Text aus der Codekomponente optisch passt. Solltest du aber jemals den Text davor ändern, s daß sich die Zeilen verschieben, musst du das Codeelement wieder neu positionieren, weil es absolut positioniert ist.

 

Realisieren kann man das besser, indem ein Teil des Textes, der den Popup-Link enthalten soll, in die Code-Komponente mit integriert wird.

 

Im Beispiel sieht der Code dann so aus:(Beachte die andere Schriftart, Rahmen sind hier zur Abgrenzung)

Das ist jetzt ein einfacher Text, der zur Demonstration den Popup-Link zur Baustellenseite enthält. Der Link selbst lautet:   Baustellenseite anzeigen  Da die Höhe der Codekomponente 75 px beträgt, muss entweder noch mehr Text folgen oder man fügt mit <p> eine Leerzeile ein.

 

Leerzeilen erzeugt man durch Eintrag von „<br>“ an der gewünschten Stelle.

Leerzeichen außerhalb eines Fließtextes erzeugt man durch Eintrag von &nbsp“ an der gewünschten Stelle. Damit sind führende bzw. abschließende Leerzeichen gemeint. Im vorigen Beispiel würde sonst der Link ohne Leerzeichen direkt an die Worte grenzen.

 

Da der Text innerhalb der Codekomponente nicht den CSS-Definitionen der anderen Textkomponenten unterliegt, (daher die andere Schrift im Beispiel oben) muß man unter Umständen etwas nachhelfen.

 

Dazu verwendet man einfach die style-Anweisung innerhalb eines <div>-Tags.

Für den Laien ganz einfach: Der gesamte Code wird in einen <div>-Tag eingeschlossen. Dem <div>-Tag kann man dabei bestimmte Eigenschaften wie Schriftart, -göße usw. zuweisen. Diese Eigenschaften gelten für alle Elemente der Webseite die darin eingeschlossen sind. Am Ende des Codes wird folgendes TAG-Ende notiert: </div>. Das ist die Endemarkierung.

 

Am Anfang des Codes notieren wir allgemein dargestellt folgendes:

 

<div style="Eigenschaft1; Eigenschaft2; Eigenschaft3; usw.”>

 

In der Regel reichen Schriftart und Schriftgröße aus, aber auch Schriftfarbe, Hintergrundfarbe, Fett, Kursiv usw. kann zugewiesen werden.

 

Hier die wichtigsten Eigenschaften, die dann bei Bedarf oben im <p>-Tag eingesetzt werden:

Schriftart

font-family:Arial

Schriftgröße

font-size:12px

Hintergrundfarbe

background-color:#808040;

Schriftfarbe

color:#D8FD02;

Zeichenabstand

letter-spacing:3px;

Kursiv

font-style:italic

Fett

font-weight:bold

Unterstrichen

text-decoration:underline

Eine Darstellung weiterer Eigenschaften findest du hier:

 

http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_style

 

 

Natürlich muß man die Werte den Angaben anpassen, die den normalen Textelementen zugewiesen sind. z.Bsb.:

 

<div style=" font-family:'Verdana'; font-size:12px;”>

 

 

Für mein Beispiel lautet der gesamte Code jetzt:

<div style="font-family:Verdana; font-size:14px;">

Das ist jetzt ein einfacher Text, der zur Demonstration den Popup-Link zur Baustellenseite enthält. Der Link selbst lautet: &nbsp

 

<a href="http:../baustelle.html" onClick="window.open('http:../baustelle.html', 'Bs', 'height=460,width=620,scrollbars')" target="Bs">Baustellenseite anzeigen</a>&nbsp

Da die Höhe der Codekomponente 75 px beträgt, muss entweder noch mehr Text folgen oder man fügt mit &ltp&gt eine Leerzeile ein.

</div>

 

Und das Ergebnis sieht so aus:

Das ist jetzt ein einfacher Text, der zur Demonstration den Popup-Link zur Baustellenseite enthält. Der Link selbst lautet:   Baustellenseite anzeigen  Da die Höhe der Codekomponente 75 Px beträgt, muss entweder noch mehr Text folgen oder man fügt mit <p> eine Leerzeile ein.

Wie man sieht, erscheint der Link jetzt normal im Fliesstext, aber noch in der Standardfarbe der Links. Hier greifen also nicht die Definitionen aus den allgemeinen Einstellungen des Templates. Also ergänze ich noch eine style-Anweisung für den <a>-Tag. WICHTIG: Die style-Anweisung muß gleich nach dem "<a" kommen noch vor dem "href...", sonst greift die Definition nicht.

Daraus folgt jetzt der Code und dann das Ergebnis:

 

<div style="font-family:Verdana; font-size:12px;">

Das ist jetzt ein einfacher Text, der zur Demonstration den Popup-Link zur Baustellenseite enthält. Der Link selbst lautet: &nbsp

 

<a style="color:green" href="http:../baustelle.html" onClick="window.open('http:../baustelle.html', 'Bs', 'height=460,width=620,scrollbars')" target="Bs">Baustellenseite anzeigen</a>&nbsp

Da die Höhe der Codekomponente 75 px beträgt, muss entweder noch mehr Text folgen oder man fügt mit &ltp&gt eine Leerzeile ein.

</div>

 

Das ist jetzt ein einfacher Text, der zur Demonstration den Popup-Link zur Baustellenseite enthält. Der Link selbst lautet:   Baustellenseite anzeigen  Da die Höhe der Codekomponente 75 Px beträgt, muss entweder noch mehr Text folgen oder man fügt mit <p> eine Leerzeile ein.