PopUp Fenster

marboe schrieb am 19.07.2019 um 12:03 Uhr

Hallo Fischi,

du findest hier zB einen Gedankenansatz dazu: https://www.magix.info/de/forum/popup-ebene-automatisch-einblenden--76702/

Zum Feinschliff musst du nur noch wissen, dass du die PopUp-Ebene bei der Benennung mit dem Zusatz (lock) versehen kannst. Dann muss sie händisch geschlossen werden.
Dafür benötigst du ein Schliessen-Kreuz mit dem Link:

popup:close

So ungefähr könnte das aussehen:

Kommst du damit weiter? Gruß Marboe

Fischi83 schrieb am 19.07.2019 um 15:13 Uhr

Super, danke marboe für die Info.

Ich werde dies dann später probieren und gib dann Bescheid.
Vorerst mal danke für die schnell Antwort.

BeRo schrieb am 19.07.2019 um 17:40 Uhr

@marboe hat Dir ja schon einen guten Tipp gegeben, es geht aber noch viel einfacher oder, je nach Gusto, auch deutlich eleganter und professioneller... 🤓

Die einfache Lösung:

Lege die Urlaubsinfo auf einer popup Ebene ab, die Du neu erstellt hast.
Lege irgendwo auf der Seite (oder auch außerhalb der Seite) einen Dummy Link auf die popup Ebene an. Der Link hat nur für den WD eine Bedeutung. Besucher müssen ihn nicht sehen...
Lege im HTML Body der Seite einen HTML Ein Zeiler an, der so aussieht:
```
<body onload="xr_cpu(4)">
```
Fertig.
Bei jedem Öffnen der Seite erscheint jetzt die Info 😊

Die bessere Lösung:

Lege die Urlaubsinfo auf einer popup Ebene ab, die Du neu erstellt hast.
Lege zusätzlich noch einen HTML Platzhalter (Rechteck) auf der popup Ebene an.
Lege irgendwo auf der Seite (oder auch außerhalb der Seite) einen Dummy Link auf die popup Ebene an. Der Link hat nur für den WD eine Bedeutung. Besucher müssen ihn nicht sehen...

So kann das aussehen:

Damit alles so funktioniert, wie Du es Dir vorgestellt hast, müssen jetzt noch ein paar Zeilen JavaScript eingebaut werden:

In den HTML Body des Platzhalters, den Du in der popup Ebene angelegt hast, gehört der u. a. Scriptcode, der den Namen des Platzhalters so definiert, dass Du später darauf zugreifen kannst :
```
<script>
document.write('<div id="Urlaubsinfo"></div>');
</script>
```

In den HTML Head der Seite schreibst Du den folgenden Scriptcode, der die JS Funktion enthält, die später, beim Öffnen der Seite gestartet wird.

<script>
function pu_open(my_name) {  //öffnet bei Aufruf mit "pu_open('Ebenenname'), die popup Ebene mit dem übergebenen Namen
var o=document.getElementById(my_name).parentNode;
if(o.id=='') o=o.parentNode.parentNode;
xr_v1(o);  //Übergabe des Ebenennamens an WD interne Funktion
}
</script>

In den HTML Body der Seite schreibst Du nun noch den JS Code, der die Funktion für die Anzeige der Urlaubsinfo zeitverzögert startet:
```
<script>
setTimeout("pu_open('Urlaubsinfo')", 2000);
</script>
```

Die popup Ebene hat durch den Aufruf per JScript automatisch den Staus "Lock" bekommen. Das heißt, das sie nur per JScript Befehl geschlossen werden kann.

Dazu legst Du einen JScript Link auf der Info Grafik an, den ein Besucher nach einem Klick auf die Grafik aktiviert.
So sieht das Script aus:
```
popup: close 'Urlaubsinfo'
```

Fertig 😇

Die mit der Methode erstellte Demo kannst Du hier ansehen.

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

Viel Erfolg 👍

Fischi83 schrieb am 22.07.2019 um 19:20 Uhr

@all: DANKE, ist ja Hammer grenzgenial die Erklärung und aufzeichnung, Danke für die Unterstüzung und Hilfe.
Ich werde erst etwas später dazu kommen dies durchzuführen aber ich glaube das sollte genau so passen.
DANKE

peter_berg64 schrieb am 08.04.2020 um 09:25 Uhr

Guten Morgen Bero,

vielen Dank für die coole Lösung mit dem Popup und der Projektdatei. Ich habe das umgesetzt bei dieser Seite https://immerschön.com, wo beim Start sofort ein Hinweis erscheinen soll. Das klappt auch super.

Nun meine Frage, wie sich das darstellt bei der mobilen Seite, was muß ich da noch ändern?

Noch bekomme ich es nicht hin, dass ein Popup dort erscheint.

Danke für die Hilfe und bleib gesund.

Peter

marboe schrieb am 08.04.2020 um 10:56 Uhr

Dafür gibt es ein Tutorial: https://www.magix.info/de/tutorials/einfacher-cookiehinweis-mit-bordmitteln-erstellen--1206142/

VG Marboe

peter_berg64 schrieb am 08.04.2020 um 15:36 Uhr

Hat super funktioniert, nochmals danke.

LG Peter

BeRo schrieb am 08.04.2020 um 20:07 Uhr

@peter_berg64

[...] Hat super funktioniert [...]

Gratuliere, dann ist zumindest Dein Problem gelöst.

Du benutzt für die Einblendung der Info die komfortable Version, die mit der von mir geposteten JScript Variante arbeitet, die die JS Funktion "pu_open(my_name)" benutzt.

In der von Dir genutzten WD Version 16 ist die Funktion noch ohne Erweiterung lauffähig. Ab Version 17 wurde die interne Programmierung verändert.
Der "Knoten" im Script, der bisher die mobile Variante repräsentierte wurde verschoben. Das erfordert eine Erweiterung der Funktion, wenn neben der Desktop Variante noch eine mobile benutzt werden soll.

Ich habe die online Demo um die mobile Variante erweitert und die ladbare Projektdatei entsprechend angepasst.

Hier ist die aktualisierte online Demo zu sehen (klick).
Und hier kann die neue Projektdatei heruntergeladen werden, die auch für die Version 17 geeignet ist (klick).

Ich wünsche Euch gerne noch ein paar schöne (virenfreie) Ostertage. 😍

marboe schrieb am 09.04.2020 um 07:58 Uhr

Und hier kann die neue Projektdatei heruntergeladen werden, die auch für die Version 17 geeignet ist (klick).

Ich kann in der heruntergeladenen Zip keinen Code finden für die Elemente
- HTML
- Dummy

Allerdings habe ich dies mit der "alten Version" ausprobiert. Das dürfte aber wohl kein Grund sein, denke ich.
Magst du, @BeRo, die Datei bitte nochmal überprüfen?

Viele Grüße und auch an dich gern schöne Ostertage, viele Ostereier und möglichst wenige Viren 🙂 Marboe

BeRo schrieb am 09.04.2020 um 08:46 Uhr

@marboe

[...] Ich kann in der heruntergeladenen Zip keinen Code finden für die Elemente - HTML - Dummy [...]

Der HTML Code und der Link haben sich nur ein bisschen versteckt...

Ich hatte nach dem Erstellen der beiden Rechtecke, die den Code und den Link tragen, noch den Text "Dummy" und "HTML" hinzugefügt. Die beiden Texte sind "blind", zeigen also keinerlei zusätzliche Infos.

Du musst also nur die Rechtecke klicken, um den Code/Link zu finden... 🤓

peter_berg64 schrieb am 09.04.2020 um 13:05 Uhr

@BeRo

Das ist ja super Service, wahrscheinlich hätte ich beim Updaten wieder überlegt, warum es dann nicht mehr klappt. Vielen Dank für die Hilfe und die neue Projektdatei.

Bleibt gesund und frohe Ostern!

Peter

peter_berg64 schrieb am 14.04.2020 um 12:41 Uhr

In der von Dir genutzten WD Version 16 ist die Funktion noch ohne Erweiterung lauffähig. Ab Version 17 wurde die interne Programmierung verändert.
Der "Knoten" im Script, der bisher die mobile Variante repräsentierte wurde verschoben. Das erfordert eine Erweiterung der Funktion, wenn neben der Desktop Variante noch eine mobile benutzt werden soll.

@BeRo Ich bin es nochmal, ich habe mir das alles nochmal angeguckt in der Projektdatei. Was wurde denn genau erweitert bei der Funktion, ich habe keinen Unterschied gesehen. Nur für mein Verständnis.

LG Peter

BeRo schrieb am 14.04.2020 um 14:02 Uhr

[...] Was wurde denn genau erweitert bei der Funktion, [...]

Die Suche nach dem "Eltern Knoten", in dem der Name der popup Ebene liegt

<script>
function pu_open(my_name) {  //öffnet bei Aufruf mit "pu_open('Ebenenname'), die popup Ebene mit dem übergebenen Namen
var o=document.getElementById(my_name);
do
  o=o.parentNode;
while (o.id=='');
xr_v1(o);  //Übergabe des Ebenennamens an WD interne JS Funktion
}
</script>

Im Script wird eine iterative Suche angestoßen, die vom aktuellen Element ausgehend, schrittweise den nächstgelegenen parentnode öffnet und prüft, ob der gewünschte Inhalt vorhanden ist, wenn ja, wird die Suche abgebrochen und der gefundene Inhalt an die WD interne Funktion "xr_v1(x)" übergeben, die dafür sorgt, dass die popup Ebene, die den gefundenen Namen trägt, eingeblendet wird. 🤓

WattNu schrieb am 14.01.2021 um 20:29 Uhr

@BeRo: Könntest du auch zeigen, wie man eine Funktion pu_close(name) zum Schließen eines Popups definieren kann?

Mein Use Case: Ich habe ein Popup, das ein Nutzer durch Klicken auf ein Symbol anzeigt. Die Popupebene hat die Eigenschaft "automatisch schließen". Dann (bei sichtbarem Popup) navigiert der Nutzer auf eine Seite durch Klicken auf einen Link. Die neue Seite erscheint. Bei Rücknavigation auf die ursprüngliche Seite ist das Popup aber immer noch sichtbar. Dies sollte nicht sein. Deswegen suche ich nach einem Weg es per Javascript auf der Seite zu schließen.

Danke und Grüße

BeRo schrieb am 14.01.2021 um 21:39 Uhr

@WattNu

[...]Könntest du auch zeigen, wie man eine Funktion pu_close(name) zum Schließen eines Popups definieren kann? [...]

Die Erklärung findest Du weiter oben im Thread (klick) 😉

WattNu schrieb am 15.01.2021 um 10:45 Uhr

Hmmm ... Dort finde ich bzgl des Schließens eines Popups nur den Hinweis auf den "JScript Link" (popup: close 'Urlaubsinfo'). Dies ist aber nichts was ich mit einem <script>-Tag nutzen kann. Dort benötige ich ja eine echte JavaScript Funktion. Oder übersehe ich da was?

Danke und Grüße

BeRo schrieb am 15.01.2021 um 11:58 Uhr

@WattNu

[...] Dies ist aber nichts was ich mit einem <script>-Tag nutzen kann [...]

Richtig, dazu müsstest Du eine echte JScript Funktion anlegen, aber...

Du kannst im WD jederzeit ein beliebiges Objekt mit einem Link versehen und genau dabei lässt Du den WD aus dem Link eine JScript Funktion machen, indem Du als Link z. B. "popup: close 'Urlaubsinfo" einträgst.
Wenn Du die Seite im Browser öffnest, findest Du das von Dir mit dem o. a. Link versehene Objekt, das nach einem Klick die verlinkte popup Ebene schließt.

Problem gelöst? 😍

WattNu schrieb am 15.01.2021 um 14:15 Uhr

Nein. Gerade der letzte Klick soll ja unnötig sein, da das Schließen automatisch bei der Rückkehr zur Seite erfolgen soll. Ich glaube, ich verstehe jetzt aber deine Logik mit dem HTML-Platzhalter als Anker und dem hinaufhangeln zur richtigen ID über die Parents. Dann lässt du die Ebene mit der magischen Funktion xr_v1(o) erscheinen. Hier suche ich das Analogon zum Verschwinden lassen. Ich könnte mich aber auch mal mit JQuery versuchen und das Attribut "visibility" des Ebenen-<div direkt setzen. Werde ich mal versuchen ...

P.S.

- gibt es irgendwo Doku zu solchen "magischen" Funktionen wie xr_v1(o)? Sind wahrscheinlich keine offiziellen APIs, oder?

- analog die Frage nach solchen besonderen Links wie "popup: ..."

Vielen Dank

BeRo schrieb am 15.01.2021 um 15:30 Uhr

@WattNu

[...]gibt es irgendwo Doku zu solchen "magischen" Funktionen wie xr_v1(o)? [...]

Nicht wirklich aber zumindest zu den "üblichen" JScript Funktionen kannst Du etwas finden, z. B. hier unten... 😀

JScript zum Öffnen/Schließen beliebiger popup Ebenen über vorab definierte Namen. Die Position der popup Ebenen im Editor spielt dabei keine Rolle.

folgendes Script in den HTML Body eines Platzhalters in der popup Ebene ablegen.
Damit wird der gewünschten Ebene ein Name zugewiesen, der gleichzeitig für eine Hilfsvariable übernommen wird.
Das u. a. Synonym 'Ebenenname' muss natürlich durch einen sinnvollen Namen für das aktuelle Projekt ersetzt werden. Der reale Name der Ebene, der im WD Editor sichtbar ist, ist dabei belanglos.

<script>
document.write('<div id="Ebenenname"></div>'); //Name (ID) für popup Ebene
var layername = "Ebenenname";  //Hilfsvariable für andere Verwendung
</script>

Jetzt kann die benannte popup Ebene mit den u. a. JScripts geöffent/geschlossen werden. Der reale Name der popup Ebene ist dabei belanglos.
Beim Öffnen einer popup Ebene "pu_open(my_name)" werden alle anderen eventuell geöffneten popup Ebenen geschlossen "my_CloseAll()"
Das Schließen einer popup Ebene kann auch separat erfolgen, beim Aufruf der Funktion "pu_close(my_name)"

<script>
function pu_open(my_name) {  //öffnet bei Aufruf mit "pu_open('Ebenenname'), die popup Ebene mit dem Namen "Ebenenname"
var o=document.getElementById(my_name);
do
  o=o.parentNode;
while (o.id=='');
my_CloseAll();  //alle geöffneten pu Ebenen schließen
xr_v1(o);  //Übergabe des Ebenennamens an WD interne Funktion
}
function pu_close(my_name) {  //schließt bei Aufruf mit "pu_close('Ebenenname'), die popup Ebene mit dem Namen "Ebenenname"
var o=document.getElementById(my_name);
do
  o=o.parentNode;
while (o.id=='');
xr_v0(o);  //Übergabe des Ebenennamens an WD interne Funktion
}
function my_CloseAll(){  //schließt alle offenen popup Ebenen
var ll=document.getElementsByTagName('div');
for(var i=ll.length-1;i>=0;i--)
{
if(ll[i].id.indexOf("xr_xp")==0){
xr_v0(ll[i]);};};};
</script>

Jede definierte popup Ebene kann auch mit einem dem folgenden JScript Funktionsaufruf geöffnet/geschlossen werden:

javascript: pu_open(layername);
javascript: pu_close(layername);
javascript: my_CloseAll();

Hier wird die Hilfsvariable "layername" benutzt, die oben, im ersten JScript definiert wurde.
Alternativ kann der im ersten JScript definierte Klarname "Ebenenname" benutzt werden, der muss dann aber in Anführungsstriche gesetzt werden.