Anstoss gesucht :)

[misterunknown]

Moin,

Nun hab ich in der Nacht folgende Idee gehabt. Was wäre, wenn der Besucher z.B. Artikel 3 (Vogelhaus) anklickt und es öffnet sich ein Fenster, wo er dann das Formular ausfüllt.

Öffnet sich ein (Browser)Fenster oder öffnet sich ein Layer? Da du von jQuery sprichst, vermute ich letzteres.

Ok, ich habe recherchiert und mit jquery geht das ja. Aber, ja das große aber kommt nun. Denn alle Beispiele im Netz öffnen immer nur ein Fenster.

Wie viele Fenster bräuchtest du denn? Man kann mit jQuery auch mehrere Fenster (Layer) zeigen.

Jetzt habe ich mir überlegt, vielleicht nehme ich ein typisches jquery Beispiel und lasse irgendwie eine Variable mit übergeben, so das man am Ende weiß der Interessent hat sich z.B. für Artikel 2 interessiert.

Das ist kein Problem.

Als Techniker und Tüftler brauche ich jetzt einen Anstoß, wie man sowas macht.
Also 5 Artikel, jeder Artikel anklickbar. Nach Klick soll sich Fenster öffnen mit einem Anfrageformular. Im Anfrageformular und in der mir zugeschickten Anfrage soll dann der Artikel mit der Nummer drinnenstehen, Bsp: Artikel 3 oder Artikel 5.

Einen Layer zu erzeugen ist kein Problem. Der Rahmen könnte so aussehen:

// Javascript  
var overlay = '<div class="overlay"><form></form></div>';  
$(document.body).prepend(overlay);

/* CSS */  
.overlay {  
    z-index:5; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  
    text-align: center; background-color: rgba(0,0,0,0.7);  
}  
.overlay form {  
    width: 80%; margin: 3em auto; text-align: left;  
}

Mit jQuery kann man das auch noch mit einem Ease-In-Effekt versehen und verschiedene Spielereien machen. Die Übergabe der Variable, die den gewünschten Artikel enthält ist auch einfach: Entweder du schreibst selbige in den Aufruf der Funktion im onclick-Event mit rein, oder du machst das ganze als unobtrusive JavaScript, und bindest die Events anhand von IDs (damit die Seite auch ohne Javascript benutzbar bleibt):

<!-- 1. Möglichkeit: -->  
<figure class="artikel"><img ...>  
   <figcaption>  
      <a onclick="openFormular('artikel123')">bestellen</a>  
   </figcaption>  
</figure>

<!-- 2. Möglichkeit: -->  
<figcaption>  
   <a href="artikelbestellen.php?artikelid=123">bestellen</a>  
</figcaption>
~~~~~~javascript
// Javascript  
$(".artikel a").click(function(e){e.preventDefault(); openFormular('artikel123'); });  

Grüße Marco