Popup mit Disclaimer und Button

[Check]

Hallo zusammen,

ich bin Neuling beim Thema css und html und brauche Eure Hilfe. Ich habe eine Webseite, die nur betreten werden darf, sofern vorher ein Disclaimer bestätigt wurde. Ansonsten geht es zurück auf die Startseite. Ich möchte das ganze als Popup lösen. Bislang habe ich nur eine "normale" Webseite, die nach Bestätigung auf die eigentliche Seite weiterleitet.

Wer kann mir helfen, wie und mit welchem Code ich das umsetzen kann? Auf der Seite Link findet Ihr ein gutes Beispiel.

Vielen Dank für Hilfe, in genau einfachen Worten, die ich als Anfänger verstehen kann.

VG Ralf

[Matthias Apsel]

Hallo Check,

ich meine, eine Fondsgesellschaft sollte rechtlich relevante Sachen von einem Profi machen lassen und auch genügend Geld haben, diesen zu bezahlen.

Bis demnächst
Matthias

[Rolf b]

ich bin Neuling beim Thema css und html und brauche Eure Hilfe.

Das solltest Du keinesfalls schreiben. Du machst Dich damit viel kleiner, als Du wirklich bist. Schließlich schreibt www.mcvm.li über Dich doch:

"Die MCVM AG arbeitet schon lange sehr vertrauensvoll mit HOMEPAGE-EINS WEBDESIGN zusammen. Wir schätzen die kreative Beratung, die große Zuverlässigkeit, die schnelle Umsetzung und die hohe Qualität. Absolute Empfehlung." www.mcvm.li

Wenn sie schon LANGE mit Dir zusammenarbeiten, kannst Du kein Neuling sein. Schlimmstenfalls fehlen Dir Kenntnisse in speziellen Gebieten. Das ist keine Schande.

Eine Schande wäre höchstens, wenn die Referenzen Fake wären. Aber das will ich Dir ja nicht unterstellen...

Ein Overlay / Popup erstellst Du als ein statisch positioniertes DIV mit hohem Z-Index, das das ganze Browserfenster einnimmt. Das machst Du teiltransparent, um die eigentliche Webseite abzudunkeln. Und darin zentrierst Du ein weiteres DIV, um das eigentliche Popup darzustellen (wobei ich mal vermute, dass HTML5 dafür auch semantischere Tags anbietet). Serverseitig sorgst Du mit einem Schalter in den Session-Daten des Anwenders dafür, dass dieses Overlay immer auf die Seite gerendert wird, solange der AKZEPTIERT-Button nicht geklickt wurde. Und der AKZEPTIERT Button muss dafür sorgen, dass besagter Schalter umgelegt wird. Das ist wichtig. Die Entscheidung, ob das Popup kommt oder nicht, darf nicht clientseitig per Javascript getroffen werden. Und dein großes Vorbild hat es darüber hinaus noch so gemacht, dass die Seite inhaltsfrei ist, solange der Disclaimer da steht. Ich habe ihn nämlich mal eben per Debugger gelöscht, aber genützt hat es mir nichts. Auch die Buttons auf der Seite haben nicht funktioniert - überall wurde dieser "Hat Akzeptiert" Schalter geprüft.

Die genaue Syntax, wie man das in HTML/CSS formuliert, kannst Du Dir z.B. hier im WIKI anlesen. Ich selbst habe dazu nichts in der Schublade und müsste es erst selbst zusammenbauen, worauf ich jetzt keine Lust habe (das würde mich ein paar Stunden kosten, die ich als Forenamateur nicht bezahlt bekomme...).

Rolf

[TS]

Hallo und guten Abend,

kurz gesprochen: keine Kekse, keine Arme äh kein Inhalt...

BTW: Kann man eigentlich über das Internet ohne persönliche Daten zu kennen wirksam einen Vertrag abschließen?

Grüße
TS

[Matthias Apsel]

Hallo TS,

BTW: Kann man eigentlich über das Internet ohne persönliche Daten zu kennen wirksam einen Vertrag abschließen?

Das ist kein Vertrag, so wie ein Türsteher mit dir auch keinen Vertrag abschließt.

Bis demnächst
Matthias

[TS]

Hallo und guten Abend,

Genau!

Ein Türsteher schließt als Handlungsgehilfe seines Arbeitgebers mit mir einen Vertrag auf Nutzung der Einrichtung, die er bewacht, durch konkludentes Handeln ab. Weist er mich dabei eindeutig (für Dritte ersichtlich) auf die Geschäftsbedingungen hin, gelten die für nachfolgende weitere Vereinbarungen als vereibart...

Grüße
TS

[Matthias Scharwies]

Servus!

Die genaue Syntax, wie man das in HTML/CSS formuliert, kannst Du Dir z.B. hier im WIKI anlesen.

Ja, hier: JavaScript/Anwendung und Praxis/zugängliche Dialog-Box

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ja, hier: JavaScript/Anwendung und Praxis/zugängliche Dialog-Box

Die Formulierung „Eine Alternative zur Verwendung eines Polyfills ist das ‚Nachrüsten‘ konventioneller HTML-Elemente mit ARIA-Atrributen, die eine volle Zugänglichkeit ermöglichen“ ist äußerst grenzwertig. Wie Steve Faulkner sagt: „ARIA ist nicht dazu da, HTML zugänglich zu machen. ARIA ist dazu da, nicht zugängliches HTML zugänglich zu machen.“ ‚Nachrüsten‘ ist keine Alternative für neu erstellte Dokumente.

Das JavaScript ist wohl auch fehlerhaft; es wird nicht das open-Attribut fürs dialog-Element gesetzt/gelöscht. Stattdessen werden CSS-Eigenschaften mit JavaScript gesetzt. :-( Warum das denn?

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Das JavaScript ist wohl auch fehlerhaft; es wird nicht das open-Attribut fürs dialog-Element gesetzt/gelöscht. Stattdessen werden CSS-Eigenschaften mit JavaScript gesetzt. :-( Warum das denn?

Machen wir einen Deal:

Du schreibst einen Blog-Beitrag zum aktuellen Wiki-Push Zeit und Datum (z.B. zu Internationalisierung von Datums- und Zeitangaben) und ich aktualisiere / verbessere dieses Beispiel.

LLAP 🖖

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf b

Ein Overlay / Popup erstellst Du als ein statisch positioniertes DIV

static? Du meinst fixed.

Und ein div für die Blende ist nicht erforderlich; das kann auch ein geeignetes Pseudoelement sein.

mit hohem Z-Index

1 sollte hoch genug sein. Oft reicht auch 0, d.h. gar keine explizite Angabe.

Und darin zentrierst Du ein weiteres DIV, um das eigentliche Popup darzustellen (wobei ich mal vermute, dass HTML5 dafür auch semantischere Tags anbietet).

Richtig vermutet. div ist fasch. Für Overlays ist das dialog-Element da.

☞ Beispiel

LLAP 🖖

[Rolf b]

static? Du meinst fixed.

Ja natürlich. Das hatte ich später auch noch festgestellt, aber keine Zeit mehr zum Editieren gehabt. Danke.

Jedenfalls habe ich jetzt eine Kette von Antworten losgetreten, die dem OP helfen können ;-)

Rolf

[TS]

Hallo und guten Tag,

jetzt nochmal ganz dumm gefragt:

ginge das Overlay usw. auch ganz ohne JavaScript nur mit CSS, Cookie und Logik im Backend?
... und selbstverständlich HTML ;-)

Ich dachte da so an einen Fadein-Effekt, der nicht ausgelöst wird, wenn der Accept-Cookie geliefert wurde.

Grüße
TS

[Matthias Apsel]

Hallo TS,

ginge das Overlay usw. auch ganz ohne JavaScript nur mit CSS, Cookie und Logik im Backend?
... und selbstverständlich HTML ;-)

Ja, die Zustimmung wird per Formular versendet.

Bis demnächst
Matthias

[TS]

Hallo und guten Abend,

ginge das Overlay usw. auch ganz ohne JavaScript nur mit CSS, Cookie und Logik im Backend?
... und selbstverständlich HTML ;-)

Ja, die Zustimmung wird per Formular versendet.

Mir ging es da um die Möglichkeit, das Overlay ohne Javascript erst einen kleinen Moment später optisch wirksam werden zu lassen. Wie könnte ich das erreichen?

Formalrechtlich müsste man das Ding vermutlich als "Besitzdiener" ansehen. Da kommt dann also durchaus ein wirksamer Vertrag zustande, wenn ein Vertragsschluss im "Fernabsatz" zwischen einer namentlich bekannten und einer namentlich unbekannten Partei zulässig ist.

Konkludentes Handeln darf man vermutlich nicht zur Grundlage machen, da hierfür i. d. R. die physische Anwesenheit beider Vertragsparteien notwendig wäre. Würde mich also schon näher interessieren, ob so ein virtueller Besitzdiener überhaupt rechtliche Auswirkung haben kann.

Anderenfalls müsste man den vermutlich in die Schublade mit den nutzlosen Disclaimern stecken?

Grüße
TS

[TS]

Hallo und guten Tag,

ginge das Overlay usw. auch ganz ohne JavaScript nur mit CSS, Cookie und Logik im Backend?
... und selbstverständlich HTML ;-)

Ja, die Zustimmung wird per Formular versendet.

Mir ging es da um die Möglichkeit, das Overlay ohne Javascript erst einen kleinen Moment später optisch wirksam werden zu lassen. Wie könnte ich das erreichen?

Formalrechtlich müsste man das Ding vermutlich als "Besitzdiener" ansehen. Da kommt dann also durchaus ein wirksamer Vertrag zustande, wenn ein Vertragsschluss im "Fernabsatz" zwischen einer namentlich bekannten und einer namentlich unbekannten Partei zulässig ist.

Konkludentes Handeln darf man vermutlich nicht zur Grundlage machen, da hierfür i. d. R. die physische Anwesenheit beider Vertragsparteien notwendig wäre. Würde mich also schon näher interessieren, ob so ein virtueller Besitzdiener überhaupt rechtliche Auswirkung haben kann.

Anderenfalls müsste man den vermutlich in die Schublade mit den nutzlosen Disclaimern stecken?

Ich vermute nach meiner heutigen Recherche eher, dass die Schublade mit nutzlosen Webentwicklungen überwiegend in Frage kommt.

Ziel des "virtuellen Besitzdieners" ist die Vorbereitung rechtsgültiger Verträge.

Wirksame Vertäge können aber nur abgeschlossen werden mit den "fünf Ws":

• Wer,
• Wann (Vertragsschluss, Leistungsdatum)
• Was,
• Wo, (Vertragsort, Leistungsort)
• Wieviel (Geld, Leistung, ...)

Wenn der "Klick-Besucher" also nicht bekannt wird (eindeutig wiedererkennbar wie bei konkludenten Geschäften), könnte später jeder behaupten "Ich war es ja gar nicht, ich habe mich da an einen PC im Intnetcafe gesetzt und nun soll ich überraschend[1] für irgendwelche Vereinbarungen herangezogen werden."

[1] als juristischer Fachterminus

Ich denke daher, dass der "virtuelle Besitzdiener" in der bisherigen Form in die Tonne zu den Disclaimern gehört, insbesondre dann, wenn man ihn durch "Only HTML" außer Kraft setzen kann!

Die Frage, wie man das Ding ohne CSS aktivieren könnte, ist nämlich auch noch nicht geklärt!

Liebe Grüße
TS

[JürgenB]

Hallo Tom,

ginge das Overlay usw. auch ganz ohne JavaScript nur mit CSS, Cookie und Logik im Backend?
... und selbstverständlich HTML ;-)

ich habe da mal was mit dem Checkbox-Hack gebastelt.

Gruß
Jürgen

[TS]

Hallo und guten Morgen,

ginge das Overlay usw. auch ganz ohne JavaScript nur mit CSS, Cookie und Logik im Backend?
... und selbstverständlich HTML ;-)

ich habe da mal was mit dem Checkbox-Hack gebastelt.

Danke. Ich bastel da mal selber weiter, wenn ich wieder am Desktop sitzen kann. Ich wollte versuchen, dass das Overlay nicht gleich so hart reinknallt, sondern erst langsam reinfadet. Aber eben ohne JS.

Grüße
TS

[TS]

Hallo und guten Morgen,

Ich bastel da mal selber weiter, wenn ich wieder am Desktop sitzen kann.

Ich konnte jetzt nur lesen, aber leider nicht experimentieren:
Beispiele

wie muss ich das machen, dass der body langsam abgedunkelt wird und dafür das Dialog-Fenster langsam eingeblendet wird?

Enthält das Element <dialog> automatisch irgendwelche Bedienelemente?

Liebe Grüße
TS

[Auge]

Hallo

Ich konnte jetzt nur lesen, aber leider nicht experimentieren:
Beispiele

wie muss ich das machen, dass der body langsam abgedunkelt wird und dafür das Dialog-Fenster langsam eingeblendet wird?

Experimentiere doch einmal mit CSS-Transitions herum. Damit solltest du dein Ziel erreichen können und die Unterstützung ist flächendeckend.

Tschö, Auge

[TS]

Hallo und guten Tag,

Ich konnte jetzt nur lesen, aber leider nicht experimentieren:
Beispiele

wie muss ich das machen, dass der body langsam abgedunkelt wird und dafür das Dialog-Fenster langsam eingeblendet wird?

Experimentiere doch einmal mit CSS-Transitions herum. Damit solltest du dein Ziel erreichen können und die Unterstützung ist flächendeckend.

Hab ich schon ein bisschen gemacht.
Aber gibt es da eine Möglichkeit, die Überblendung nicht linear, sondern exponentiell wachsen zu lassen, damit man am Anfang fast nichts merkt und es dann nach ca. 1-2 Sekunden ganz schnell fertig wird?

Liebe Grüße
TS

[Auge]

Hallo

wie muss ich das machen, dass der body langsam abgedunkelt wird und dafür das Dialog-Fenster langsam eingeblendet wird?

Experimentiere doch einmal mit CSS-Transitions herum.

Hab ich schon ein bisschen gemacht.
Aber gibt es da eine Möglichkeit, die Überblendung nicht linear, sondern exponentiell wachsen zu lassen, damit man am Anfang fast nichts merkt und es dann nach ca. 1-2 Sekunden ganz schnell fertig wird?

Ja.

Tschö, Auge

[JürgenB]

Hallo Tom,

wie muss ich das machen, dass der body langsam abgedunkelt wird und dafür das Dialog-Fenster langsam eingeblendet wird?

ich würde es mit transition und/oder animation probieren. Aber achte darauf, das sich nicht alle Eigenschaften überblenden lassen, z.B. display.

Enthält das Element <dialog> automatisch irgendwelche Bedienelemente?

Am bestem siehst du dir das mal im chrome an. Ich musste einige Defaulteigenschaften in meinem css überschreiben. Den OK-Knopf habe ich eingebaut, das ist das Label von der Checkbox.

Gruß
Jürgen