Sartseite mit Bestätigungsformular überlagern

marboe schrieb am 13.01.2018 um 17:32 Uhr

Da es sich bei deinem Vorhaben letztlich ja nur um einen Pseudoklick handelt, kannst du es dir hier sehr einfach machen.

Erstelle ein Rechteck, welches den Großteil deiner Seite bedeckt. Darauf platziere deinen Text und vll auch ein Feld, das nach "klick mich" aussieht.

Die Teile verschiebe dann in eine neue popup Ebene. Lass diese popup Ebene eingeblendet (Auge auf).

Das müsste es schon gewesen sein. Du könntest in den Hintergrund des popup auch noch ein Rechteck legen, das den sichtbaren Teil der Seite abdunkelt.

Dieses popup braucht noch einen link von der MouseOff Ebene. Das darf ein einfacher Text sein, der neben der Seite liegt. Später bei Klick irgendwo in diesen popup Bereich wird sich dieser automatisch schließen.

Ein andere Möglichkeit ist natürlich der Codeeingriff per "onload". Aber vll reicht dir das so schon??

Gruß marboe

BeRo schrieb am 13.01.2018 um 18:02 Uhr

@marboe

Sorry, ich hatte die Frage von @Sardinien so verstanden, dass er für die Altersprüfung ein Formular anzeigen will und erst nach dem Ausfüllen des Formulars die Seite frei geben will.
Wenn das zutrifft, dann wird es etwas aufwändiger...

@alle

Erstell' zunächst die von @marboe angesprochene neue Ebene, die du z. B. "Anmeldung" nennst.
Damit die Ebene später nicht unkontrolliert geschlossen werden kann, muss sie noch die Erweiterung "(lock)" bekommen. Der vollständige Name ist dann "Anmeldung (lock)".

In die neue Ebene...:

legst Du ein schwarz gefülltes Rechteck, in der Seitengröße.
In der unten gezeigten Demo ist das die Größe von 1120 x 3790 px.
Das Rechteck machst Du mit dem Transparenz Werkzeug halb transparent, damit der eigentliche Seiteninhalt noch zu sehen ist.
kommt noch, wenn erforderlich, ein farbiger Hintergrund für das Anmeldeformular.
Auch der Hintergrund sollte eine teilweise Transparenz bekommen.
gehört noch der Platzhalter (Rechteck) für das Anmeldeformular.
In den Platzhalter schreibst Du entweder den kompletten (HTML/JavaScript/CSS) Code für das Anmeldeformular oder Du bindest das Formular mit einem iframe Code ein.

Jetzt fehlt noch ein dummy Button, den Du außerhalb des Seiteninhalts anlegen musst. Der Button muss einen Link auf die popup Ebene "Anmeldung (lock)" bekommen.

Damit die Anmelde Ebene beim Seitenaufruf automatisch eingeblendet wird, legst Du in den HTML Body der Seite ein kleines HTML Script ab, das so aussieht:

<body onload="xr_cpu(4);">
(Der Wert "4" im HTML Code ist abhängig vom Seitenaufbau)

Damit die Anmeldeseite geschlossen wird, wenn das Formular ordnungsgemäß ausgefüllt wurde, muss im Code an geeigneter Stelle noch ein Link gestartet werden, der so aussieht:

javascript:xr_ppc(%27xr_xp4%27);

oder es muss eine JScript Funktion gestartet werden, die die im WD fest "verdrahtete Funktion "xr_ppc(%27xr_xp4%27)" ausführt:

Das war's dann im Wesentlichen auch schon...😊

Sardinien schrieb am 13.01.2018 um 18:11 Uhr

Auweia, klingt ja erstmal "wild", werde ich aber ausprobieren. Ganz lieben Dank für die schnelle Hilfe. Bin gespannt, ob es funktioniert.

Sardinien schrieb am 13.01.2018 um 18:20 Uhr

...vielleicht gleich die Frage zu...

"Damit die Anmeldeseite geschlossen wird, wenn das Formular ordnungsgemäß ausgefüllt wurde, muss im Code an geeigneter Stelle noch ein Link gestartet werden, der so aussieht:

javascript:xr_ppc(%27xr_xp4%27);"

Was bedeutet denn an geeigneter Stelle? Muss javascript:xr_ppc(%27xr_xp4%27); direkt hinter den kompletten Code des Anmeldeformmulars gesetzt werden? Bin leider keine Programmiererin und kenne mich mit Javascript überhaupt nicht aus.

BeRo schrieb am 13.01.2018 um 18:32 Uhr

[...] Was bedeutet denn an geeigneter Stelle? [...]

Das kann man erst sagen, wenn der Code bekannt ist, mit dem das Formular eingebunden wird.
Korrekt wäre es, wenn zunächst die Prüfung auf Volljährigkeit positiv abgeschlossen wurde und dann erst die Funktion "xr_ppc(%27xr_xp4%27)" gestartet wird.

Aber, wie gesagt, wo der Code genau eingebaut werden muss ist ohne Detailinfos nicht zu sagen... 😞

-------------------------

Edit: 15. Jan. 15:46 h

Wenn Du noch nicht weitergekommen sein solltest, mit Deinem Projekt, dann schau Dir mal die Demo an, die ich hier abgelegt habe:

Da wird der eigentliche Seiteninhalt so lange abgedunkelt und für Zugriffe gesperrt, bis ein Geburtsdatum eingegeben wird, mit dem das geforderte Alter bestätigt wird.

Der verwendete JScript/HTML Code sieht so aus:

-----------------------------------------------------
<script>
    function calcAge() {
        var Datum = document.getElementsByName("GebDat")[0].value;
       var d = Datum.substr(0, 2);
       var m = Datum.substr(3, 2) -1; //1 Monat abziehen, weil Januar = 0
       var y = Datum.substr(6, 4);
        if (Datum.length !== 10) {
           var age = "";
           document.getElementsByName("age")[0].innerHTML = age;
           return;
            }
        var age = ~~((Date.now() - +new Date(y,m,d)) / (31557600000));
       if (age > 17 ){
            var age = "Du bist " + age+ " Jahre alt und damit<br />herzlich willkommen auf unserer Site!";
            setTimeout(function() {xr_ppc('xr_xp4')}, 5000);
            }
       else {
       var age = "Du bist erst " + age+ " Jahre alt daher darfst<br /> Du die Seite leider nicht besuchen!";
           setTimeout("document.location.reload();",5000);
            }
   document.getElementsByName("age")[0].innerHTML = age;
    }
</script>
<font color = ff3803 size=+2> Geburtsdatum (TT.MM.JJJJ): <input style="background-color:#7cc67c; color:#ff3803; height:25px; font-size:16pt; width:120px;" type="text size="10" maxlength="10"" name="GebDat" onkeyup="calcAge();" /><br />
<br>Info:   <span name="age"></span>
</font>
---------------------------------------------------

Im o. a. Code habe ich die WD interne Funktion fett markiert, die dafür sorgt, dass 5 Sek. nach der Eingabe eines korrekten Geburtsdatums die popup Ebene "Verdunkelung" ausgeblendet wird und die Seite normal benutzt werden kann.
Das ist also hier die "geeignete Stelle" 😊

Die zur Demo gehörende Projektdatei kannst Du hier herunterladen, für eigene Experimente.

Und, nur Mut, es sieht komplizierter aus, als es ist... 👍

Sardinien schrieb am 16.01.2018 um 20:39 Uhr

Klasse, das werde ich auf jeden Fall ausprobieren. Wenn ich den Code so lese, kann ich das auch verstehen. Aber leider nicht selber schreiben. Vielen Dank dafür! Mittlerweile hat sich noch eine weitere Frage ergeben. Ich möchte einen Onepager mit oben fixierter Navigation aufbauen. Gibt es einen Trick, mit dem ich die Sprungmarke von der Navigation auf den entsprechenden Textbereich so setzen kann, dass der Startpunkt (z.B. eine Überschrift) nicht unter der fixierten Navigation sitzt? Der "Anker auf" liegt immer unter der Navigation, so dass man noch ein wenig scrollen muss, um an den richtigen Punkt zu kommen. Das finde ich nicht schön. Den Text weiter nach unten zu setzen, würde ziemlich große Abstände ergeben...auch keine gute Lösung.

BeRo schrieb am 16.01.2018 um 21:34 Uhr

[...] Der "Anker auf" liegt immer unter der Navigation, so dass man noch ein wenig scrollen muss, um an den richtigen Punkt zu kommen. [...]

Leg den Anker doch einfach auf einen beliebigen Punkt über dem Text an, den Du nach einem Klick auf den Anker Link sehen willst... 😊
Wenn da kein Text steht, den du für den Zweck "missbrauchen" kannst, legst Du einfach ein kleines, farbloses (transparentes) Rechteck an, dem Du den Ankernamen zuweist. Die Position dieses Rechtecks kannst Du auf der Seite frei wählen. Damit kannst Du es problemlos so einrichten, dass nach einem Klick auf den Anker Link der gewünschte Text optimal positioniert wird.

So kann das aussehen:

Natürlich muss der variable Ankerpunkt, das Rechteck, transparent gemacht werden, damit er nicht stört...
Nach einem Klick auf den Anker Link (Button) siehst Du den gewünschten Anker (Textzeile) in optimaler Position unter dem Header.

Viel Erfolg

Sardinien schrieb am 03.02.2018 um 16:39 Uhr

Na da hätte ich ja auch selber drauf kommen können. Ich fand die Idee irgendwie komisch, das über ein transparentes Element zu steuern, wenn das da einfach so rumliegt...aber klar...dann löse ich das eben einfach so. Manchmal sind die einfachen Lösungen doch die Besten. Danke für die Hilfe!🙂

Und jetzt habe ich noch eine technische Frage, da der Support bisher leider nicht geantwortet hat. Ich möchte Webdesigner 12 auch in meiner Firma verwenden. Dort wird der Rechner aber über einen Proxy-Eintrag geschützt. Ich habe Webdesigner bereits in die zugelassenen Programme der Firewall eingebunden. Trotzdem bekomme ich keinen Zugriff auf den Online-Katalog. Dort kommt immer die Fehlermeldung: das Programm ist offline. Unser IT-Abteilung meint, man müsste beim Programm selber den Proxyeintrag hinterlegen. Bloss wo? Ich habe bisher nichts gefunden. Hat jemand vielleicht eine Idee, wie man das lösen könnte?

BeRo schrieb am 03.02.2018 um 17:32 Uhr

[...] Unser IT-Abteilung meint, man müsste beim Programm selber den Proxyeintrag hinterlegen. [...]

Dazu kann ich Dir leider keinen Tipp geben.

Erstell' einfach einen neuen Thread mit Deiner Frage. Ich bin sicher, dass Du dann mehr Infos bekommst...

Sardinien schrieb am 08.02.2018 um 08:22 Uhr

Hallo BeRo,

mittlerweile hat sich der Support von Magix gemeldet und wir haben bereits mehrere Dinge versucht. Leider bisher erfolglos. Vielleicht findet sich die Lösung ja noch.

LG, Sardinien