Mobirise4 / Popup-Fenster

Allgemeine Fragen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von Tommy Herrmann »

Du - ich weiß gerade nicht wo dieser Eintrag in der CSS-Datei her kommt. Ich habe sicherlich so 60 Projekte im Thema "Mobirise 4" am Server und keines hat so einen Eintrag in der CSS-Datei.

Weiterhin fehlt bei Dir der Verweis zur lokalen CSS-Datei mit derAngabe der Schriften im Quelltext Deiner Seite :confused:

Vielleicht solltest Du da mal an den Support von Mobirise schreiben - mit Link und Thema und allem was wichtig sein könnte:

support@mobirise.com
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von struggle »

so, nun habe ich mir noch die Schriftart "Source sans pro" runtergeladen und installiert. Bei dieser Aktion hat es mir den Menüblock komplett zerhauen. So mußte ich mir eine neue Seite erstellen, indem ich die letzte "Projekt mobirise" importiert habe. Dabei habe ich festgestellt, wenn ich die Schriftartgröße manuell eingebe, wird wieder alles zerhauen. mit dem Schieberegler klappt es.
Jedenfalls habe ich alles wieder herstellen können. Meiner Meinung nach müßte jetzt der Google-Verweis entfernt sein. Ich bitte darum, mal nachzuschauen.

Dankeschön
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ja - was hattest Du bloß gemacht?

Es ist und bleibt mir ein totales Rätsel, wie der "Google Fonts" Eintrag in die CSS-Datei gekommen ist und warum der Pfad zu den lokalen Schriften fehlte, der nun wieder da ist und der Eintrag aus der CSS-Datei ist auch wieder raus, so wie es sein soll :tu:

Die Seite ist jetzt "sauber" von "Google Fonts", wie Du auch z.B. hier testen kannst:

https://sicher3.de/google-fonts-checker/



Geprüft habe ich Deine Startseite:

http://www.immo4live.de/

Bei diesem Checker muss man jede Seite einzeln prüfen lassen, bei der man Verdacht hat. Wenn man z.B. andere Google-Dienste wie "Google Maps" oder auch "YouTube" einbindet, wird wieder "Google Fonts" über diese APIs im Hintergrund nachgeladen. Da muss man aufpassen - aber solche Anwendungen hast Du ja nirgendwo.


Google-Fonts Checker.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von Tommy Herrmann »

Moin,

... ach noch etwas.

Du wolltest doch gerne so eine Abdunklung ("Overlay") für Deinen Datenschutzhinweis haben.

Den habe ich jetzt mal erstellt - und das mit Hilfe einer "Künstlichen Intelligenz" - guckst Du hier - ist fast nicht zu glauben:

viewtopic.php?p=9456#p9456


Ich habe dann mal dieses Skript noch in das Skript vom Werner integriert, also diesen Teil hier:


Abdunklung-Skript einschalten hat geschrieben:
// Overlay element
var overlay = document.createElement("div");
overlay.id = "overlay";
overlay.style.background = "rgba(0, 0, 0, 0.6)";
overlay.style.position = "fixed";
overlay.style.top = 0;
overlay.style.left = 0;
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.zIndex = 1050;
// Overlay zur Seite hinzufügen
document.body.appendChild(overlay);

... und das Ausschalten vom Overlay in der Funktion "akzeptieren":

Abdunklung-Skript ausschalten hat geschrieben:
document.body.removeChild(overlay);

Zusammen sieht das dann so aus und gehört nun aber zwingend in den Bereich "End of <body> code", weil das an den Body angehängt wird:

Code: Alles auswählen

<script>
    // DSGVO - Datenschutz-Hinweis

    var LinkZurDatenschutzerklaerung = "datenschutz.html";

    window.addEventListener("DOMContentLoaded", function () {
    
     if (!window.localStorage.getItem("DSGVO")) {
     
      document.getElementsByTagName("body")[0].appendChild(document.createElement("div")).setAttribute("id", "dsgvo_hinweis");
      document.getElementById("dsgvo_hinweis").innerHTML = '<p>' +
      'Diese Seite verwendet Cookies (Buh!) für alles mögliche (Werbung, Facebook, Google). Wenn Du Dich weiterhin auf dieser Seite aufhälst, akzeptierst Du unseren Einsatz von Cookies .</p>' +
      '<p><a href="' + LinkZurDatenschutzerklaerung + '" class="dsgvo_hinweis_button" target="_blank">Datenschutzerklärung</a>' +
      '<a href="javascript:akzeptieren();" class="dsgvo_hinweis_button">mir doch egal</a></p>';

      // Overlay Element
      var overlay = document.createElement("div");
      overlay.id = "overlay";
      overlay.style.background = "rgba(0, 0, 0, 0.6)";
      overlay.style.position = "fixed";
      overlay.style.top = 0;
      overlay.style.left = 0;
      overlay.style.width = "100%";
      overlay.style.height = "100%";
      overlay.style.zIndex = 1050;  
      // Overlay zur Seite hinzufügen
      document.body.appendChild(overlay);
      
     }
     
    });
    
    function akzeptieren() {
      window.localStorage.setItem("DSGVO", "true");
      document.getElementById("dsgvo_hinweis").style.display="none";
      // Overlay von Seite entfernen
      document.body.removeChild(overlay);
    }
</script>
Du müsstest dann aber diesen JavaScript-Teil von dem <style> (CSS) Teil trennen.

Den Style lässt Du im Bereich - Achtung, jetzt aber mit erhöhtem z-index von 1100:

"Inside <head> code"

Code: Alles auswählen

<style>
    /* DSGVO - Datenschutz-Hinweis */
    div#dsgvo_hinweis {
        position: Fixed;
        bottom: 300px;
        left: 30%;
        width: 40%;
        z-index: 1100;
        text-align: Center;
        cursor: Default;
        background-color: rgba(255, 255, 0, 0.9);
        border: Solid 3px rgb(234, 39, 68);
        border-radius: 12px;
    }
    
    /* Abstand von der Schrift */
    div#dsgvo_hinweis p {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Media-Anweisung bis 767px Breite von 100% */
    @media (max-width: 767px) {
        div#dsgvo_hinweis {
            bottom: 0px;
            left: 0%;
            width: 100%;
        }
    }

    a.dsgvo_hinweis_button,
    a.dsgvo_hinweis_button:visited {
        text-decoration: None;
        padding: 7px;
        background-color: rgb(234, 39, 68);
        color: rgb(255, 255, 255);
        margin-right: 10px;
        border-radius: 7px;
    }

    a.dsgvo_hinweis_button:hover, 
    a.dsgvo_hinweis_button:active {
        background-color: rgb(0, 166, 0);
        color: rgb(255,255, 255);
    }
</style>
... stehen und das JavaScript muss dann ganz unten im Code stehen, also im Bereich:

"End of <body> code"


Die Farbe und die Deckkraft ("Opacity") vom Overlay wird damit bestimmt:

overlay.style.background = "rgba(0, 0, 0, 0.6)";

... also mit einer RGBA-Farbangabe, wobei der letzte Wert 0.6 eben die Deckkraft ist, also in diesem Beispiel 60%.


Aussehen tut das dann so:


Hinweis mit Overlay.jpg


Ich habe den z-index für das Overlay und den Datenschutzhinweis entsprechend hoch gesetzt, somit kann die Navi und Links auf der Serite nicht mehr ausgeführt werden solange noch nicht zugestimmt wurde, weil sie vom Overlay überdeckt sind.

https://developer.mozilla.org/en-US/doc ... SS/z-index

Wenn also der z-index der Navi z.B. bei 1030 liegt, müsste der z-index vom Overlay höher sein, z.B. 1031 und der z-index vom Datenschutzhinweis noch höher, z.B. 1032.

Ich habe den vom Overlay jetzt auf 1050 und den vom Datenschutzhinweis auf 1100 gesetzt. Die Navi von Mobirise hat meist einen z-index von 1030.


P.S.:

Wolltest Du Deine Seite, die ja schon recht dunkel ist, nicht abdunkeln sondern nur das Overlay als "Schirm" über der Seite haben um eben die Navi zu blockieren, müsstest Du die Deckkraft der Farbe zurücknehmen - also z.B. auf 0.1 (10%)

overlay.style.background = "rgba(0, 0, 0, 0.1)";

oder eben ganz ausschalten auf 0% Deckkraft - also transparent:

overlay.style.background = "rgba(0, 0, 0, 0)";
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von struggle »

Hallo Tommy,
Dankeschön für Deine Mühe.

Das ist wirklich interessant, was alles möglich ist. Das will ich unbedingt nutzen. Dazu habe ich mir meine Seite geclont (Header und Footer sind ja nicht global), hat wunderbar funktioniert, da kann ich mich erst Mal austoben.

Mir macht das langsam richtig Spaß, je mehr ich verstehe. Ich forsche bei jedem Begriff nach, was er bedeutet, z.B. z-Index, daß der höhere Wert näher beim Betrachter ist usw. Trotz meines Alters :D Ich hoffe nur, daß im Frühjahr die Gartenarbeit nicht drunter leidet.

Ein bisschen lächeln muß ich aber, erinnert es mich ein wenig an NOF, wo man früher ein GIF Blank über ein Bild gelegt hat, daß man es nicht klauen kann.
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von Tommy Herrmann »

Ja, daran kann ich mich entsinnen - das war aber damals schon falsch, Bilder kann man dennoch klauen. Es gibt heute noch jede Menge Leute, die so einen Quatsch einbauen - wie z.B. eine Rechtsklick-Sperre oder anderes.

Ich finde es faszinierend, dass eine Maschine, "ChatGPT" von "OpenAI" (AI = Artificial Intelligence / künstliche Intelligenz), mir dieses zusätzlich JavaScript geschrieben hat - einfach irre :angst:

Total schnell und super einfach.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mobirise4 / Popup-Fenster

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ich habe übrigens diesen ganzen Datenschutz-Hinweis nun nochmals in etwas abgeänderter Form als Tutorial mit in meine Seiten aufgenommen:

https://www.mobirise-tutorials.com/Tuto ... orage.html
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Majestic-12 [Bot] und 31 Gäste