Popup Alternative

Tutorials von Thomas Frei-Herrmann

Popup als neues Fenster als Alternative zum NOF-Popup-Fenster

... im April 2012 musste ich feststellen, dass der zur Zeit aktuelle Browser “Chrome” von Google das Popup-Fenster von NOF nicht mehr darstellt und anstelle dessen ein extra Fenster minimiert öffnet. Stand Juni 2012: nun geht auch das NOF-Popup im Chrome wieder

Hier eine eigene Javascript Alternative.

 

Klick zum Popup-Fenster zentriert  oder auf eine interne Seite verlinken oder auf eine externe Seite verlinken

 

Hierfür habe ich folgendes Javascript in die HTML des Layouts eingefügt, gebt die Größe des Fensters bei width (Breite) und height (Höhe) an, sowie ob zentriert (linkes Skript) oder mit fester Position (rechtes Skript). Alle Skripte auf dieser Seite könnt Ihr im Quelltext sehen.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

Fenster-Position zentriert

Fenster-Position positioniert

<script type="text/javascript">
<!--
function popup(url)
{
 var width  = 490;
 var height = 367;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;

 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=yes';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'meinfenster', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<script type="text/javascript">
<!--
function positionpopup(url)
{
 var width  = 490;
 var height = 367;
 var left   = 100;
 var top    = 300;

 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=yes';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'meinfenster', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

... und das Skript unten in den HTML-Code Editor eines Textfeldes kopiert.

> Textfeld aufziehen (Cursor blinkt) > mittlere Button “Textfeld” > Button “HTML”

Für den Text-Link

<a href="javascript: void(0)" onclick="popup('./assets/images/Peonie.jpg')">Klick zum Popup-Fenster</a>

Für den Link mit dem Miniaturbild (Thumbnail)

<a href="javascript: void(0)" onclick="popup('./assets/images/Peonie.jpg')"><img id="Peonie" height="120" width="160"
src="./assets/images/peonie-thumb.jpg" title="Peonie" border="0"/></a>

Bitte achtet (wie immer) auf die korrekte relative Pfadangabe zu der Datei, hier mit einem Punkt ./ da ich von der Startseite verlinke. Von einer Unterseite, sofern sich diese im Verzeichnis “html” befindet, müssten dann dort zwei Punkte hin, also ../

Ihr könnt auch ebensogut auf eine andere Seite verlinken oder auch einen absoluten Pfad mit z.B. dem Protokoll http://
zu einer externen Seite eintragen, Google Chrome oder auch z.B. der IE9 öffnen externe Links standardmäßig allerdings in einem neuen Tab

 


Hier könnt Ihr Euch den Quelltext dieser Seite anzeigen lassen
Quelltext in Ausgabe mitanzeigen
 

diese Seite weiter empfehlen



Counter Statistik