Wie erstelle ich solch ein Popup Fenster?

[Thronanwärter]

Hallo zusammen..

Meine Frage wäre, wie man ein Pop-Up Fenster wie in der Grafik unten erstellt und wie man es dann auch mit Informationen füllen kann.

Was ich dazu sagen muss: Man klickt auf einen Button auf einer Homepage und dieses Fenster öffnet sich dann sehr elegant .. die Homepage im Hintergrund existiert jedoch unscharf weiter.



Lg
Thronanwärter

 

[HasenBerg]

Hey,
das geht ganz einfach mithilfe von jQuery. jQuery ist ein JavaScript-FrameWork, das sehr leicht zu erlernen, einzubinden und zu bedienen ist.
jQuery hat unglaublich viele Plugins, um das zu realisieren, was du möchtest. Google also mal nach jQuery, binde es ein und erweitere es anschließend mit jQuery UI, dieses beinhaltet nämlich auch die Funktionalität, die du dir wünscht: jQuery UI - Dialog Demos & Documentation
Hoffe ich konnte dir helfen & lieben Gruß,

 

[oceanlab]

lightbox ist auch ein sehr sehr einfaches und gutes script.

Lightbox 2

 

[Thronanwärter]

@oceanlab

lightbox ist das was ich suchte.

VIELEN DANK

 

[Thronanwärter]

Ich bekomms nicht hin .. könntet ihr vielleicht einen Code posten, wo ich nur noch breite höhe und inhalt anpassen müsste?

Lg
thronanwärter

 

[oceanlab]

Erstmal musst du die Lightbox auf den Server hochladen. Dann den unten stehenden Code umändern, sodass der Ordner stimmt...

DAS in den HEAD einfügen!

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />


<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

Unten das in den BODY einfügen!

<a href="lightbox/images/image-1.jpg" rel="lightbox"><img src="lightbox/images/thumb-1.jpg" width="321" height="453" alt="" /></a>

Da musst du nur noch den Dateinamen umändern und den Ordner angeben wo dieses Bild liegt. Praktisch wie oben...

Dann in dem Ordner js die datei lightbox.js öffnen und dann such per editor "loading.gif" und "close.gif" und da musst du dann eventuell auch noch den Ordner vorschreiben, falls du das irgendwie anders auf deinem Server laufen lässt.

Also z.B.:

Wenn du den Ordner Lightbox hochlädst und sich darin dann die Ordner "css", "images" und "js" befinden musst du vor alle Dateien lightbox/der jeweilige Ordner/die jeweilige Datei schreiben...

Ist aber in der index.html die dabei ist auch genau beschrieben...

 

[Thronanwärter]

Vielen Dank schonmal an dieser Stelle an oceanlab

Ich werde versuchen Lightbox zu installieren.

Kann ich damit auch einfache Texte in so einem Fenster öffnen lassen?
Oder geht das nur mit Bildern?


Angenommen ich habe einen Button auf der Homepage mit dem Namen "TERMINE"
Dieser Button ist jetzt noch mit der Seite "Termine.html" verknüpft.
Wenn ich da nun die Lightbox einbauen würde, würde sich die Datei "Termine.html"
in einem Lightbox Fenster öffnen.

Habe ich das richtig verstanden?

Lg
Thronanwärter

 

[HasenBerg]

Nein, deswegen ist diese Lightbox auch nicht das Richtige für dich -_-.
Der Autor der Webseite selbst verweist anschließend auf Plugins von jQuery, falls du interessiert bist, Inhalte in einer solchen Box darzustellen. Zum Beispiel über Fancybox - Fancy lightbox alternative