Mobirise-Tutorials.com

Moin.
Wenn ich auf den Button "Tafelgerichte" im PopUp Builder klicke,
werde ich zwar zu den Tafelgerichten weitergeleitet.
Aber der PopUp Builder bleibt sichtbar.
Die Desserts sollen aber beim klick auf den Button schließen.
Möglich?

https://www.gaststaette-zur-sonne.de

Moin,

füge noch am Button-Link diese Bootstrap-Anweisung hinzu:

data-dismiss="modal"

also:

<a class="btn btn-md btn-secondary display-4" data-dismiss="modal" href="index.html#Tafelgerichte">Tafelgerichte</a>

Und wieder mal: DANKESCHÖN
Funzt.....

Hallo
Bei mir auf dem Handy im Firefox wurde dein Pop-up nicht geschlossen. Solltest du noch einmal überprüfen.

... ist auch online noch nicht eigebaut ...

Oh. Tschuldigung.
Problem gelöst und nur Lokal publiziert. FTP vergessen.
Jetzt aber.....

Hallo Thomas,

da Du wahrscheinlich an einem anderen Monitor arbeitest als ich gerade hier an meinem Laptop, der eine der häufigst verwendeten Auflösungen nutzt (1600 x 900), wollte ich Dich darauf aufmerksam machen, dass man diese Popups nicht zu hoch machen sollte.

Ich sehe z.B. diesen Button "Tafelgerichte" erst nach dem Scrollen nach unten, zumal die Transparenz, die Du da außen herum gemacht hast eigentlich eher verwirrend ist. So steht das "Schließen - Kreuz" und der Button vollkommen frei und hat kaum noch Zusammenhang zum Popup. Vom Design her, finde ich das keine gute Lösung und daher auch nicht von der Bedienbarkeit.

Die Wahrscheinlichkeit, dass ich das Popup schließe, bevor ich diesen Button jemals gesehen habe, ist also sehr groß.


Vielleicht solltest Du lieber einen Link zu den "Tafelgerichten" setzen und den Button weglassen und auch die Höhe vom Popup reduzieren, denn auch am Handy ist der Button unten schon nur noch zur Hälfte sichtbar und wirkt zusammenhanglos.

... hier mal ein Link als Beispiel oben als Titel "Tafelgerichte" (am besten mit Unterstrich, den jeder als Link kennt).

Moin Tommy.
Ich greife mal deinen Vorschlag auf.
Und möchte mal was versuchen.
Transparenz weg.
Und anstatt einer Background Farbe möchte ich ein jpg einfügen.
Was müsste ich denn dafür machen? Wie würde das Code mäßig aussehen?
Im HTML? Oder direkt im CSS?

Moin,

... damit habe ich mich bisher noch nicht beschäftigt

Wieso ein Bild als Hintergrund eines Popups

Das geht ja vollkommen am Sinn vorbei, dann kannst Du ja gleich eine neue Seite öffnen.

Ein Popup ist ein sogenanntes "Layer - Fenster", das über dem Inhalt liegt, der eigentlich auch sichtbar bleiben soll. Diese starke Abdunklung gibt es normalerweise auch nicht.

Nee. So meine ich das nicht.
Das jpg wäre z.B. die Tafelstruktur in hell. Also keine glatte Unifarbe.
In etwa so:

das ist insofern schon etwas doof, weil Dein Bild natürlich eine feste Größe hat und das Popup nicht. Das ist ja responsive und wird am Handy weniger Breite zur Verfügung haben und dadurch höher erscheinen.

Du kannst natürlich, anstelle der Farbe, auch Dein Bild als Hintergrund der class="modal-content" eintragen:

CSS hat geschrieben:.modal-content {
background-image: url('absolute Url zum Bild am Server/images/background-popup.jpg');
background-repeat: no-repeat;
background-size: 100%;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-clip: padding-box;
border: none;
outline: 0;
-webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
}

Dazu würdest Du als Inhalt vom Modal "none" - also nichts wählen. Dann würde der Inhalt der Schrift die Höhe bestimmen, die dann aber auch wieder, je nach Displaygröße, variieren muss.


so ungefähr am Desktop


so am kleinen Display

Ich werde es mal ausprobieren. Danke.