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 J
avaScript 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:
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)";