Zur Navigation

Popup Window

1 Rob

Hallo,
ich habe folgendes Script für ein popup window und hätte gerne, dass a) das geöffnete Fenster zentriert dargestellt wird und b) ich einen Text zwischen Bild und close-button eingeben kann.
Ich krieg's einfach nicht hin!!!
Danke, Rob

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!---
Protokoll = self.location.protocol;
Pfad = self.location.pathname;
Basis = Protokoll + '//' + Pfad.substring(1,Pfad.length-11)
neues_Fenster = null;

function errorTrap() {return true;}
window.onerror = errorTrap;

function Zeigen(Bild0,Titel0,Breite0,Hoehe0)
{
   Bild = Bild0;
   Titel = Titel0;
   Breite = Breite0;
   Hoehe = Hoehe0;
   zu();
   setTimeout("sichtbar()",1000);
}

function sichtbar()
{  
   Fenster_Hoehe = Hoehe + 80;
   Fenster_Breite = Breite + 40;
   Optionen = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,height='+Fenster_Hoehe+',width='+Fenster_Breite,screenX=100,screenY=240,left=100,top=240;
   neues_Fenster = window.open('','',Optionen)
   with (neues_Fenster) 
   {
      document.writeln('<HTML><HEAD><TITLE>' + Titel + '</TITLE></HEAD>');
      document.writeln('<BODY BGCOLOR="#c0c0c0" TEXT="#FFFFFF"><DIV ALIGN=CENTER><TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0 VALIGN="MIDDLE"><TR><TD>');
      document.writeln('<IMG SRC="'+Bild+'" WIDTH='+Breite+' HEIGHT='+Hoehe+' BORDER=0 ALT="'+Titel+'"></TD>');
      document.writeln('</TR></TABLE></DIV></BODY></HTML>');
        document.write('<center>');
  document.write('<form><input type="button" value="Close" onClick="self.close()"></form>');

   }
}

function zu()
{
   if (neues_Fenster != null)
     if (!neues_Fenster.closed)
        if (neues_Fenster.close)
           neues_Fenster.close(); 
}

//--->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#006633" VLINK="#006633" ALINK="#99FFCC" onload="Breu_spaeter()" onunload="zu()">

	<FORM>
	<p>
	<A HREF="Javascript:Zeigen('images/P1000109.jpg','Italienische Landschaft',355,460)">
	<IMG SRC="images/P1000109_tny.jpg" WIDTH=85 HEIGHT=110 BORDER=0 ALT="Italienische Landschaft"></A>

[von Jörg Code-Block eingefügt, damit der Code nicht die Seite sprengt]

22.04.2006 23:27 | geändert: 23.04.2006 08:22

2 Jörg Kruse

Hallo Rob,

zu 2) für einen Text unter dem Bild musst du die function Zeigen() erweitern um eine Parameter für den Text, z.B. mit dem Namen Text0:

function Zeigen(Bild0,Titel0,Breite0,Hoehe0,Text0)
{
  Bild = Bild0;
  Titel = Titel0;
  Breite = Breite0;
  Hoehe = Hoehe0;
  Bildtext = Text0;
  zu();
  setTimeout("sichtbar()",1000);
}

Die Variable Bildtext baust du dann an pasender Stelle in die Funktion sichtbar() ein:

document.writeln('<IMG SRC="'+Bild+'" WIDTH='+Breite+' HEIGHT='+Hoehe+' BORDER=0 ALT="'+Titel+'"><br>'+Bildtext+'</TD>');

Den JavaScript-Link änderst du dann so, dass er den zusätzlichen Paramter mit dem Text als Wert erhält (hier: 'BlaBla'):

<A HREF="Javascript:Zeigen('images/P1000109.jpg','Italienische Landschaft',355,460,'BlaBla')">

zu 1) gibt es z.B. auf web-toolbox.net eine Anleitung:

Window zentrieren

23.04.2006 08:36

3 Rob

Hallo Jörg,
vielen Dank für deine Tipps. Ich habe aber deine Ratschlage etwas umgearbeitet ins Script eingebaut. Nach deiner Beschreibung wäre der Text zum Bild noch innerhalb des Biderrahmens erschienen. Ich möchte ihn aber außerhalb. Was mich jetzt noch stört ist, dass die Abstände zwischen Bilderrahmen und Text und zwischen Text und Close-Button zu groß sind. Wie könnte man diese Abstände verkleinern???
Gruß Rob

<SCRIPT LANGUAGE="JavaScript">
<!---
Protokoll = self.location.protocol;
Pfad = self.location.pathname;
Basis = Protokoll + '//' + Pfad.substring(1,Pfad.length-11)
neues_Fenster = null;

function errorTrap() {return true;}
window.onerror = errorTrap;

function Zeigen(Bild0,Text0,Titel0,Breite0,Hoehe0)
{
Bild = Bild0;
Bildtext = Text0
Titel = Titel0;
Breite = Breite0;
Hoehe = Hoehe0;
zu();
setTimeout("sichtbar()",1000);
}

function sichtbar()
{
Fenster_Hoehe = Hoehe + 120;
Fenster_Breite = Breite + 40;
Optionen = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,height='+Fenster_Hoehe+',width='+Fenster_Breite;
neues_Fenster = window.open('','',Optionen)
with (neues_Fenster)
{
document.writeln('<HTML><HEAD><TITLE>' + Titel + '</TITLE></HEAD>');
document.writeln('<BODY BGCOLOR="#c0c0c0" TEXT="#FFFFFF"><DIV ALIGN=CENTER><TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0 VALIGN="MIDDLE"><TR><TD>');
document.writeln('<IMG SRC="'+Bild+'" WIDTH='+Breite+' HEIGHT='+Hoehe+' BORDER=0 ALT="'+Titel+'"></TD>');
document.writeln('</TR></TABLE></DIV></BODY></HTML>');
document.writeln('<center>');
document.writeln(" </br><p style='font-family: Arial; font-size: 8pt; font-weight:bold; color: #000000; padding: 10px;' >"+Bildtext+"</p>");
document.writeln('<form><input type="button" value="Close" onClick="self.close()"></form>');

}
}

function zu()
{
if (neues_Fenster != null)
if (!neues_Fenster.closed)
if (neues_Fenster.close)
neues_Fenster.close();
}

//--->
</SCRIPT>

</HEAD>

<BODY
<p>
<A HREF="Javascript:Zeigen('images/P1000109.jpg','Italienische Landschaft','Italien',355,460)">
<IMG SRC="images/P1000109_tny.jpg" WIDTH=85 HEIGHT=110 BORDER=0 ALT="Italienische Landschaft"></A>
</BODY>
</HTML>

23.04.2006 14:26

4 Jörg Kruse

Hallo Rob,

erst einmal solltest du die Tags richtig verschachteln, also html, body und das div erst ganz am Ende schließen. Das Element center ist dann unnötig und kannst du dann rausschmeißen. Dadurch verringern sich auch schon Abstände. Dann kannst du noch den Umbruich (br) entfernen und für den Textabsatz ein margin:0 definieren:

     document.writeln('<HTML><HEAD><TITLE>' + Titel + '</TITLE></HEAD>');
     document.writeln('<BODY BGCOLOR="#c0c0c0" TEXT="#FFFFFF"><DIV ALIGN=CENTER><TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0 VALIGN="MIDDLE"><TR><TD>');
     document.writeln('<IMG SRC="'+Bild+'" WIDTH='+Breite+' HEIGHT='+Hoehe+' BORDER=0 ALT="'+Titel+'"></TD>');
     document.writeln('</TR></TABLE>');
     document.writeln("<p style='font-family: Arial; font-size: 8pt; font-weight:bold; color: #000000; padding: 10px; margin:0' >"+Bildtext+"</p>");
     document.writeln('<form><input type="button" value="Close" onClick="self.close()"></form>');
     document.writeln('</DIV></BODY></HTML>');

23.04.2006 17:30 | geändert: 23.04.2006 17:31

5 Rob

Danke Jörg - hat gepasst!!!

Gruß Rob

23.04.2006 22:45

6 Rob

Hallo,
ich habe im folgenden window popup unter dem Bildtext noch einen Dateitext eingefügt. Aber ich schaffe es nicht, diese Schrift in 10px und nicht in fett darzustellen.
Gruß Rob

<SCRIPT LANGUAGE="JavaScript">
<!---
Protokoll = self.location.protocol;
Pfad = self.location.pathname;
Basis = Protokoll + '//' + Pfad.substring(1,Pfad.length-11)
neues_Fenster = null;

function errorTrap() {return true;}
window.onerror = errorTrap;

function Zeigen(Bild0,Text0,Datei0,Titel0,Breite0,Hoehe0)
{
Bild = Bild0;
Titel = Titel0;
Bildtext = Text0
Dateien = Datei0
Breite = Breite0;
Hoehe = Hoehe0;
zu();
setTimeout("sichtbar()",1000);
}

function sichtbar()
{
Fenster_Hoehe = Hoehe + 120;
Fenster_Breite = Breite + 40;
Optionen = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,height='+Fenster_Hoehe+',width='+Fenster_Breite;
neues_Fenster = window.open('','',Optionen)
with (neues_Fenster)
{
document.writeln('<HTML><HEAD><TITLE>' + Titel + '</TITLE></HEAD>');
document.writeln('<BODY BGCOLOR="#c0c0c0" TEXT="#FFFFFF"><DIV ALIGN=CENTER><TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0 VALIGN="MIDDLE"><TR><TD>');
document.writeln('<IMG SRC="'+Bild+'" WIDTH='+Breite+' HEIGHT='+Hoehe+' BORDER=0 ALT="'+Titel+'"></TD>');
document.writeln('</TR></TABLE>');
document.writeln("<p style='font-family: Verdana; font-size: 14px; font-weight:bold; color: #000000; padding: 10px; margin:0' ><b>"+Bildtext+"</b><br>"+Dateien+"<br><br><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 9px; width: 135' onClick='self.close()'></td>\n");
document.writeln('</DIV></BODY></HTML>');

}
}

function zu()
{
if (neues_Fenster != null)
if (!neues_Fenster.closed)
if (neues_Fenster.close)
neues_Fenster.close();
}

//--->
</SCRIPT>

</HEAD>

<BODY
<p>
<A HREF="Javascript:Zeigen('images/P1000109.jpg','Italienische Landschaft','Acryl','Italien',355,460)">
<IMG SRC="images/P1000109_tny.jpg" WIDTH=85 HEIGHT=110 BORDER=0 ALT="Italienische Landschaft"></A>

24.04.2006 22:04

7 Jörg Kruse

Naja, das sind alles eher HTML- und CSS-Probleme. Eine eigene Formatierung erreichst du, indem du den Textabschnitt in einen eigenen Absatz umschließt, für das du dann die betreffeden Eigenschaften definierst:

 document.writeln("<p style='font-family: Verdana; font-size: 14px; font-weight:bold; color: #000000; padding: 10px; margin:0' >"+Bildtext+"<p style='font-size:10px; font-weight:normal'>"+Dateien+"</p><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 9px; width: 135' onClick='self.close()'></td>\n");

Und die <b></b>-Tags im Absatz davor sind auch unnötig, da du für diesen schon eine fette Schrift definiert hast (font-weight:bold;)

24.04.2006 22:47

8 Rob

Hallo,
ich kann machen was ich will, aber ich kriege dieses popup window einfach nicht zentriert!!!
Hilfe! Gruß Rob

<SCRIPT LANGUAGE="JavaScript">
<!---
Protokoll = self.location.protocol;
Pfad = self.location.pathname;
Basis = Protokoll + '//' + Pfad.substring(1,Pfad.length-11)
neues_Fenster = null;

function errorTrap() {return true;}
window.onerror = errorTrap;

function Zeigen(Bild0,Bildtext0,Datei0,Titel0,Breite0,Hoehe0)
{
Bild = Bild0;
Titel = Titel0;
Bildtext = Bildtext0
Dateien = Datei0
Breite = Breite0;
Hoehe = Hoehe0;
zu();
setTimeout("sichtbar()",1000);
}

function sichtbar()
{

Fenster_Hoehe = Hoehe + 110;
Fenster_Breite = Breite + 40;
Optionen = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,height='+Fenster_Hoehe+',width='+Fenster_Breite;
neues_Fenster = window.open('','',Optionen)
with (neues_Fenster)
{
document.writeln('<HTML><HEAD><TITLE>' + Titel + '</TITLE></HEAD>');
document.writeln('<BODY BGCOLOR="#c0c0c0" TEXT="#000000"><DIV ALIGN=CENTER><TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0 VALIGN="MIDDLE"><TR><TD>');
document.writeln('<IMG SRC="'+Bild+'" WIDTH='+Breite+' HEIGHT='+Hoehe+' BORDER=0 ALT="'+Titel+'"></TD>');
document.writeln('</TR></TABLE>');
document.writeln("<td align='center'><br><font face='Arial' size='2' ><b>"+Bildtext+"</b><br><font face='Arial' size='1' >"+Dateien+"</p><br><br><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 9px; width: 135' onClick='self.close()'></p></td>\n");
document.writeln('</DIV></BODY></HTML>');

}
}

function zu()
{
if (neues_Fenster != null)
if (!neues_Fenster.closed)
if (neues_Fenster.close)
neues_Fenster.close();
}

//--->
</SCRIPT>

</HEAD>

<BODY
<p>
<A HREF="Javascript:Zeigen('images/P1000109.jpg','Haus','Acryl','Italien',355,460)">
<IMG SRC="images/P1000109_tny.jpg" WIDTH=85 HEIGHT=110 BORDER=0 ALT="Italienische Landschaft"></A>&nbsp;&nbsp;&nbsp;&nbsp;

27.04.2006 21:34

9 Jörg Kruse

Wie in dem oben genannten Link beschrieben, kannst du die linke Position (left) des Popup-Fensters mithilfe von screen.width berechnen:

  Fenster_Hoehe = Hoehe + 110;
  Fenster_Breite = Breite + 40;
  Fenster_Pos_Links = (screen.width - Fenster_Breite) / 2;
  Optionen = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,height='+Fenster_Hoehe+',width='+Fenster_Breite+',left='+Fenster_Pos_Links;

27.04.2006 22:49 | geändert: 27.04.2006 22:50

10 Rob

Vielen Dank Jörg für Deine Mühen! Es hat sich gelohnt.
Danke, Gruß Rob

28.04.2006 15:39