Webseite mit Infofenster überlappen per JS/Ajax

[shadoan]

Hallo. Ich möchte in einer bestehenden Webseite gerne per Formular einige Daten abfragen und das auf verschiedenen Teilseiten dieser Seite. Ich möchte jedoch nicht, dass der Besucher immer wieder auf eine separate Formularseite springt, sondern dass diese innerhalb der Seite aufgeht (ohne jedoch ein separates Popup zu sein). Während der Besucher diese Seite(Formular) sieht, soll es ihm zudem nicht möglich sein, auf der eigentlich "dahinter" liegenden Hauptseite Eingaben zu machen oder Hyperlinks zu klicken. Er soll das Formular jedoch per [X] wegklicken können.

Mag sein, dass die Lösung schon im Forum steht und ich zum suchen zu dumm bin. Falls dem so ist, entschuldigt bitte und helft mir auf dem Sprünge. :)

 

[struppi]

Schön - ist das eine "Ich wünsch mir was" Frage? Ist das überhaupt eine Frage? Oder ist das ein Auftragsangebot?

 

[shadoan]

Wow, eine Antwort wie edle Tropfen. Geistreicher Genuss. Danke sehr.

Aber dann für dich ganz konkret: ich möchte ein HTML-Element (Formular) beim Klicken eines Links auf einer Webseite im Vordergrund dieser Webseite darstellen. Und zwar so, dass man keinen link mehr auf der Webseite drücken kann, sondern entweder das Formular absenden oder eben schliessen muss.

Wie mache ich das? War das jetzt klar genug?

 

[Gilles]

Das ganze wird mit Javascript bewerkstelligt. Doch bevor ich etwas dazu sage, solltets du dir im Klaren sein, das es Leute gibt, die Javascript deaktiviert haben. Deswegen solltets du auf jeden Fall noch eine noscript Variante einbauen.
Wenn ich dich richtig versteh, ist das Formular die ganze Zeit auf der Website, soll aber nur bei einem klick angezeigt werden.

Schritt1: Erstelle das Formular ganz normal und setze es hin wo du willst und vergebe dem Formular eine id (Also da wo es für Leute ohne Javascript stehen würde)

Schritt2: Setze die visibility des Formulars mittels javascript auf hidden.

Schritt3: Lasse ein Script nach dem Laden des Dokumentes (window.onload) laufen, welches das Formular versteckt (visibility = hidden)

Schritt4: Bei einem Klick auf das Element deiner Wahl, lasse folgendes ausführen. Erstellen eines absoluten divs welchen als backgroundColor transparent ist. Dieses hängst du dem body an. (Im Notfall noch zIndex erhöhen, damit es mit Sicherheit der oberste layer ist). Dieses Div ist 100% Breit und Hoch. Und es ist absolut positioniert.

Schritt5: Lasse das Formular sichtbar werden. Hole seine Koordinaten. (Dafür geb ich dir gleich ne Funktion ;)) nehm es dir und häng es in das absolute div rein. Das Formular stellst du auch absolut dar, mit den top und left Koordnaten, die du vorher ermittelt hast.

Schritt6: Klatsch dir noch irgend wo ein Schliessen Button rein. Der alles wieder rückgängig macht. :)

Hier die versprochene Funktion um die koordinaten zu ermitteln

function getTopLeft(elm) {
        var x, y = 0;
        
        x = elm.offsetLeft;
        y = elm.offsetTop;
        elm = elm.offsetParent;
      
        while(elm !== null) {
         x = parseInt(x) + parseInt(elm.offsetLeft);
         y = parseInt(y) + parseInt(elm.offsetTop);
         elm = elm.offsetParent;
        }
        return {top:y, left: x};
      }

 

[shadoan]

Vielen, vielen Dank. Wie gesagt mir fehlte der Lösungsansatz. Die Funktion ist sogar noch das Sahnehäubchen oben drauf. Danke dafür.

Schön, dass es hier noch Leute gibt, die denen helfen, die noch nicht ganz so fit sind wie sie selbst.

 

[Gilles]

Vielen, vielen Dank. Wie gesagt mir fehlte der Lösungsansatz. Die Funktion ist sogar noch das Sahnehäubchen oben drauf. Danke dafür.

Schön, dass es hier noch Leute gibt, die denen helfen, die noch nicht ganz so fit sind wie sie selbst.

Kein Problem ;)
Struppi ist auch immer hilfreich. Du hast den text nur leiderein wenig unpassend formuliert, dass es eher nach einer Anfrage aussieht als nach einem Problem :)

Also dann viel Erfolg bei der Umsetzung