Besten Dank für die Antwort, ich war über das Wochenende weg, kann deswegen erst jetzt mehr Infos geben.

HIer sieht man das Popup-Foto mit abgedunkeltem Hintergrund, wobei das Foto auch immer zentriert zur Seite ausgerichtet ist.

Bei dem zweiten Beispiel handelt es sich um eine Popupebene:

Inhalt Rechteck mit Textinhalt.

Das möchte ich auch zentrieren und abdunkeln wie im oberen Beispiel.

Auf der Seite http://bochumtotal.de/ kann man auch so etwas sehen.

Ich hoffe ich mich mich jetzt klarer ausgdrückt, oder brauchst du noch mehr Infos?

Vielen Dank für die Hilfe.

Peter

Das mit dem Zentrieren hatten wir hier schon mal. Lange her. 😔🎴🕔

Hier mein damaliger Kommentar.

Abdunkeln kennt der WD nur an einer Stelle. In den Webeigenschaften und der Einstellung der Popupebene (Foto).

Den Kommentar hatte ich auch schon gesehen, aber irgenwie komme ich damit nicht weiter. Verstehe ich also richtig, nur mit Fotos als Popup kann man den Hintergrund abdunkeln?

Hier ist der Link für den ich das für die einzelnen Programmpunkte umsetzen möchte: http://www.2018.castrop-kocht-ueber.de/

Für den ersten Programmpunkt habe ich schon eine Ebene angelegt. Die sollte mittig sein mit Hintergrund abgedunkelt.

[...] habe ich schon eine Ebene angelegt. Die sollte mittig sein mit Hintergrund abgedunkelt. [...]

Dann musst Du etwas mehr tun. Die "highslide" Methode ist ja leider nur für Bilder geeignet...

Für Dein Vorhaben musst Du...:

1. ein paar Zeilen CSS Code in den HTML Head der Seite legen
2. den Inhalt der popup Ebene in einer Gruppe zusammenfassen
3. der Gruppe den Namen "popup" geben
4. "unter" der Gruppe ein halbtransparentes Rechteck in der Seitengröße anlegen, um die Seite abzudunkeln
5. Auf der Seite einen Link anlegen, mit dem die popup Ebene angezeigt werden kann
6. Fertig 😉

Im Detail sieht das so aus:

zu 1. Der CSS Code sieht so aus:

<style type="text/css">
  #popup {
    width:500px !important;
    height:350px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-175px 0 0 -250px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:inline;
  }
</style>

Die im Code vorhanden Werte für height/width müssen noch an die tatsächliche Größe der Gruppe auf der pu Ebene angepasst werden.
Das gilt auch für die negativen "margin" Werte, die sollten etwa 50% der Größe der Gruppe in Pixeln haben.

zu 2. 3. 4. hier die Kurzanleitung als Screenshot:

zu 5.

zu 6. 😉

Die online Demo kannst Du hier ansehen.

Die lauffähige Projektdatei, mit der ich die Demo erstellt habe, kannst Du hier herunterladen.

Viel Erfolg

Super, das ist genau das, was ich meine. Werde ich gerne testen und dann berichten.

Nur noch eine kurze Frage, das soll ja für mehrere Popupebenen umgesetzt werden (mehrere Programmpunkte). Füge ich dann den Code für jede Gruppe ein, #popup1, #popup2, etc??

Und nochmal vielen Dank für die Hilfe!

[...] Füge ich dann den Code für jede Gruppe ein, #popup1, #popup2, etc? [...]

Genauso sollte das gehen. 👍

Edit 16.03. - 22:37h / zusätzliche Infos
---------------------------------------------------------
Wenn alle popup Ebenen Inhalte in identischer Größe haben, musst Du den CSS Code nicht mehrfach anlegen. Es genügt völlig, wenn Du nur den ID-Selektor erweiterst.

Edit 19.03. - 23:10 h / Korrektur im CSS Code
----------------------------------------------------------
Im Klartext heißt das, dass Du die unterschiedlichen IDs einfach hintereinander, kommasepariert in den einen CSS Code schreibst.
Das kann so aussehen:

<style type="text/css">
  #popup, #popup2, #popup3, #popup4, #popup5 {
    width:500px !important;
    height:350px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-175px 0 0 -250px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:inline;
  }
</style>

Die einzelnen Gruppen in den popup Ebenen müssen dann nur noch die zu den o. a. definierten IDs korrespondierenden Namen (popup2, popup3, usw.) bekommen.

Probier's einfach.

Viel Erfolg

Leider haben alle Ebenen der Programmpunkte andere Größen, weil die Inhalte verschieden sind. Aber für die einzelnen Gastro-Popups kann ich den Tipp gut gebrauchen, Danke!!!

Im Moment bin ich bei dem abgedunkelten Hintergrund, da habe ich eine Frage zu dem transparenten Rechteck, kann man es auch seitenfüllend machen? Wenn ich die Option "ausdehnen" wähle, ist das Rechteck nicht mehr sichtbar.

[...] Frage zu dem transparenten Rechteck, kann man es auch seitenfüllend machen? [...]

Kein Problem. 🙂

Wenn Du mit "seitenfüllend" meinst, dass das Rechteck das komplette Browserfenster ausfüllen soll, dann geht das, wenn du die Größe auf z. B. 20.000 x 20.000 Px setzt und in den Webeigenschaften die Option "Auf Seitenrand beschneiden" entfernst:

Die vergleichsweise "riesige" Größe von 20.000 Px ist nötig, um sicherzustellen, dass der abgedunkelte Hintergrund auch dann noch sichtbar ist, wenn auf einem großen Monitor in der Vollbilddarstellung die niedrigste Zoomstufe im Browser gewählt wird.

Na dann, viel Erfolg und noch einen schönen Rest vom WE 😊

Das ist ja prompter Service, vielen Dank!

Auch noch schönes Wochenende.

So jetzt habe ich versucht das umzusetzen, leider klappt das mit dem Zentrieren noch nicht.

Siehe http://www.2018.castrop-kocht-ueber.de/#xl_Xxr_v3_HeadingAnchor:58b9dUw

Programmpunkt Sonadores

Hier Schritt 1.

Dann den Code:

Kann es damit zusammenhängen, dass die Seite auch verschiedene Größenvarianten hat?

Ich wollte das erst nur für die Wide-Variante machen. Gruppe für Gruppe, dann für die anderen da ebenso mit anderen Gruppennamen etc..

Oder habe ich noch einen anderen Fehler drin?

LG

Peter

Update: Ich habe jetzt noch etwas gestestet. Kopiere ich die Ebene Info aus deinem Projekt in ein bestehendes von mir mit der Version 12, klappt alles. Mache ich das gleiche bei der Version 15 haut die Zentrierung nicht hin.

[...] Kopiere ich die Ebene Info aus deinem Projekt in ein bestehendes von mir mit der Version 12, klappt alles. [...]

Die Schlussfolgerung liegt auf der Hand: "Die Version 15 hat einen Bug"! (oder ein neues Feature 😊).

Wenn man sich näher ansieht, was der WD15 "auf den Tisch" bringt, sieht man schnell, wo's hakt...

Die IDs, die in unserem Fall mit den Namen für die Gruppen in den popup Ebenen angelegt werden, werden vom WD bei der Ausgabe der Varianten verändert. Damit wird der ID bezogene CSS Code, der für die Zentrierung sorgen soll, nicht mehr gefunden.

So sieht der "gesunde" HTML Code der Seite aus:

Das ist der vom WD "gefälschte" Code für die Smartphone Variante:

Die korrekte (Smartphone) ID sollte "popupS" sein.

Abhilfe (Workaround):
Ändere im CSS Code die Namen der IDs der Smartphone-, und der Tablet Variante, durch Voranstellen des WD eigenen Präfix "XXr_v2_", bzw. "XXr_v3_"
Ich vermute dass "v2", "v3" in der neuen ID für die Variante 2-, bzw. Variante3 steht...

So kann der neue Code aussehen:

<style>
   #popup, #popup2, #Xxr_v2_popupS, #Xxr_v2_popup2S {
    width:240px !important;
    height:387px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-193px 0 0 -120px; /* [-(height/2)px 0 0 -(width/2)px] */
    display: block;
  }
 </style>

Dann sollte es klappen 😉

Viel Erfolg

P.S.
Meine Ergänzungsinfo vom 16.03. - 22:37 h, ist leider so nicht brauchbar.
Richtig ist, dass zwar mehrere ID Selektoren hintereinander in den CSS Code geschrieben werden dürfen, sie müssen aber Komma separiert werden und jeder Selektor muss mit einem HashTag beginnen, also so:

#popup, #popup2, #Xxr_v2_popupS, #Xxr_v2_popup2S 

Sorry für die Fehlinfo 😩

Also erst mal wieder Danke!!! Ohne die Hilfe hätte ich schon aufgegeben.

Ich komme Stück für Stück weiter, aber habe immer noch nicht den ganzen Durchblick. Wo bzw. wie hast du denn den Code für das Smartphone ausgelesen? Kann ich das direkt in WD15 machen?

Jetzt habe ich die Gruppe Info nochmal in das Projekt kopiert (auf der Main-Seite). Anweisung in den Head der Seite und für diese Seite klappt es perfekt. Auch für die Wide passt es (Code angepasst), fehlt mit nur noch für das Handy, muss aber jetzt erst unterbrechen.

LG

Peter

[...] wie hast du denn den Code für das Smartphone ausgelesen? [...]

Ich habe die exportierte HTML Seite mit einem einfachen Texteditor geöffnet und nach der vergebenen ID (Namen) gesucht...

[...] Kann ich das direkt in WD15 machen? [...]

Nein, das geht leider nicht, aber der oben gezeigte Weg ist ja nur 2 Mausklicks entfernt. 😉

[...] fehlt mit nur noch für das Handy [...]

Mit der oben genannten Methode (Suche nach Namen) sollte Dir auch das gelingen. 👍

Viel Erfolg

So, ich bin wieder ein Stück weiter. Für den ersten Programmpunkt habe ich es schon hinbekommen, dabei aber auch neue Dinge entdeckt. Wenn ich z.B. eine Popupebene animiere, erscheint nur das verdunkelte Rechteck dahinter. Also wieder sofort erscheinen lassen.

Für die Handyvaraiante werde ich wohl die Zentrierung weglassen, weil der Inhalt größer ist als das Display, also muss dort gescrollt werden.

Nur wie ich die Ebenen schliesse, bin ich noch nicht richtig schlüssig. Mache ich es automatisch oder lieber mit Klick. Da befindet sich das automatisch erstellte x immer da, wo die Gruppe eigentlich ist, wenn sie nicht zentriert ist. Eine eigene Schaltfläche ist auch eine Möglichkeit, aber da zeigt er mir den Link nach dem veröffentlichen nicht an auf einer Ebene, da muss ich noch mal gucken.

Aber so langsam nimmt es Formen an, ohne die gute Unterstützung wäre ich noch nicht so weit gekommen.

Besten Dank!!!👍👍👍

[...] Nur wie ich die Ebenen schliesse, bin ich noch nicht richtig schlüssig.[...]

Normalerweise schließt jeder Klick, der irgendwo auf der Seite gemacht wird, eine geöffnete popup Ebene.

Die "hässliche" Lösung ist das Abwählen der Option "Popup automatisch schließen". Dann wird das weiße "schließen" Kreuz auf schwarzem Grund eingeblendet, was in unserem Fall ein Eigenleben hat, weil es nicht mit der Gruppe zentriert wird. 😫

Lösung:

• Erweitere den Namen der popup Ebene mit dem Postfix " (lock)"
• Erstell' eine neue Gruppe in der popup Ebene, die einen Button (+Text) enthält.
• Gib der Gruppe einen Namen, z. B. "pu-Button"
• Lege für die Gruppe einen Link an (Webeigenschaften, Link auf...) mit dem die popup Ebene geschlossen wird. Der Link muss so aussehen: "popup:close"
  
  
• Erstell' ein neues CSS Script für die Positionierung des Buttons. Das kann so aussehen

<style>
#pu-Button, #pu-Button2 {
    width:126px !important;
    height:34px !important;
    position: fixed;
    top:50% !important;
    left:50% !important;
    margin: 130px 0 0 -63px; /* [-(height/2)px 0 0 -(width/2)px] */
    display: block;
  }
</style>

Die Pixelwerte für die tatsächliche Position musst Du experimentell ermitteln.

Fertig 😉

Jetzt kann die eingeblendete popup Ebene nur noch mit einem Klick auf den gerade angelegten Button geschlossen werden.

Viel Erfolg

Werde ich umgehend testen, nur eine Frage vorab. In den ersten beiden CSS Scripten ist display auf inline gestellt, bei den letzten beiden steht es auf block. Was ist genau der Unterschied, bzw. was bewirkt es in diesem Fall?

Ich werde weiter berichten, wie ich voran komme.😉😊

Danke für die Hilfe!

[...] In den ersten beiden CSS Scripten ist display auf inline gestellt, bei den letzten beiden steht es auf block. [...]

Für die in den popup Ebenen liegenden Objekte spielt es keine Rolle, ob Du sie mit der Display Eigenschaft "inline" oder "block" anzeigst, da sie keinen Bezug zu einem Child/Parent Element haben. Mehr Details findest Du hier

Frohes Schaffen... 😊

Erste Schaltfläche ist erstellt, genial.

Schönes Wochenende!

Ich möchte mich hier noch einmal bedanken für die gute Hilfe, ohne hätte ich es nicht geschafft.👍👍👍👍

Ein erstes Ergebnis kann man hier sehen: www.ckü.de

Die Seite ist aber noch nicht komplett fertig, es kommen noch einige Popupebenen dazu.

Und das war heute mein Problem. Auf einmal wurde das Projekt total träge beim erstellen der einzelnen Ebenen. Das Projekt besteht aus drei Seiten-Varianten (Gesamtgröße 8MB), in der Main-Variante habe ich jeweils eine Programm-Popupebene dubliziert, dann unbenannt und mit den anderen Infos gefüllt. Scripte angepasst, dann die Gruppe kopiert und in die Wide-Variante eingefügt. Und da habe ich wohl den Punkt verpasst, ab dem es nicht mehr flüssig lief, sodass ich erst mal weiter gearbeitet habe.😈👿

Als ich heute Abend weiter machen wollte, fiel es mir aber richtig auf und auch das Öffnen und Schliessen ging nur noch schleppend. Den Stand den man jetzt sieht, habe ich noch mit Mühe veröffentlichen können, dann habe ich eine Sicherheitskopie von heute Morgen geöffnet, da läuft alles super.😃😃

Nun meine Frage dazu, kann man einfach die Ebenen dublizieren und dann in die einzelnen Seiten-Varianten einfügen? Oder soll man die Ebenen besser alle neu erstellen?

Die Popupebenen auf der Wide- und Mainvariante sind gleichgroß, deswegen habe ich auch die gleichen Namen dafür genommen, um sie durch die CSS Scripte anzusprechen. Oder besser dort andere Namen? Bedeutet aber auch mehr Script Text.

Über einen Tipp würde ich mich freuen, dass ich nach Ostern durchstarten kann.

Schöne Ostertage.

Peter

Hallo Marboe, auch Dir Danke für die ausführliche Antwort.

ich werde dann wohl die weiteren Ebenen per Hand anlegen und den Gruppen dann einen individuellen Namen geben. Dann werde ich zwar ein paar mehr Scripte benötigen, aber egal.Ich werde dann mal genauer darauf achten, wann es nicht mehr so flüssig läuft, um dann einen Schritt zurück zugehen. Vielleicht kann ich dann den Fehler, bzw. das Problem erkennen.

Zu Deiner Frage, ich teste mit Firefox und Edge. Die Smartphonevariante mache ich eh ohne Zentrierung, weil die Popupbeben teilweise zu groß sind.

Nun zu deinen Anmerkungen, ich bin für jeden Hinweis danke der mit neutralem BLick mal daruf guckt:
Ich werde wohl den Link noch auf die Bilder legen und anstatt des kleinen Pfeiles das Wort "mehr" nehmen.

Das andere Problem habe ich auch schon im Blick, ich hatte überlegt, eventuell die Navi zu fixieren. Das mit dem Pfeil fände ich aber auch gut, dass ab einer gewissen Tiefe ein Pfeil am rechten Rand auftaucht. Nicht nur der Pfeil im Footer. Oder so ein Pfeil wie hier im Forum für beide Richtungen, hast du das auch einen Tipp auf Lager?

Weiter schöne Ostertage.

Peter