Hallo bonapart,
ich versuche das jetzt mal hier richtig reinzustellen.
Dies hier habe ich in den Seiteneinstellungen in den Bereich "Inside <head> code:" kopiert
---------------------------------------------------------------------------------------------------------------------------
Code: Alles auswählen
<script>
function myModal() {
window.location.href = '#openModal';
}
window.onload = myModal;
</script>
<script>
window.addEventListener("DOMContentLoaded", function () {
if ('localStorage' in window &&
window['localStorage'] !== null) {
if (window.localStorage.getItem("DSGVO")) {
document.getElementById("dsgvo_hinweis").style.display="none";
}
}
});
function akzeptieren() {
if ('localStorage' in window &&
window['localStorage'] !== null) {
window.localStorage.setItem("DSGVO", "true");
document.getElementById("dsgvo_hinweis").style.display="none";
}
}
</script>
-------------------------------------------------------------------------------------------------------------------
Hier die HTML des Blocks:
<div>
<!-- Beginn Anzeige vom Modal -->
<a href="javascript: myModal();">Modal</a>
<div id="dsgvo_hinweis">
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Schließen" class="close">X</a>
<h1>Einladung zur Jahreshauptversammlung <br>am 12.02.2025</h1>
<a href="
https://www.shotokan-karate-dojo-neukir ... 2025_2.pdf" target="_blank">zur Einladung ==></a>
</div>
</div>
</div>
<!-- Ende Anzeige vom Modal -->
</div>
------------------------------------------------------------------------------------------------------------------------------------------
und hier die CSS des Blocks:
Code: Alles auswählen
div {
padding: 10px 0;
color: #777;
text-align: center;
background-color: white;
}
p {
font-size: 20px;
color: #777;
}
a {
font-size: 20px;
color: blk;
}
h1 {
color : blk;
}
.modalDialog {
position: Fixed;
font-family: Verdana, Sans-Serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: None;
}
.modalDialog:target {
opacity: 1;
pointer-events: Auto;
}
.modalDialog > div {
width: 800px;
max-width: 90%;
position: relative;
margin: 10% Auto;
padding: 20px 10px 20px 10px;
border-radius: 30px;
background-color: #FFFFFF;
background-color: white;
cursor: Default;
}
.close {
background-color: orange;
opacity: 1.0;
color: #ffffff;
line-height: 30px;
width: 30px;
position: Absolute;
right: -12px;
text-align: Center;
top: -10px;
text-decoration: None;
font-size: 14px;
font-weight: Bold;
border-radius: 12px;
box-shadow: 5px 5px 8px #000000;
}
.close:hover {
background-color: #00D9FF;
}
---------------------------------------------------------------------------------------------------------------------------------------------
Der Block ist am Seitenende eingefügt. Der Schriftzug "Modal" weiß wie der Hintergrund. Brauche ich das Popup nicht mehr entferne ich den Block . Das ist eigentlich schon alles. Den Block selbst hab ich als Userblock gespeichert und passe ihn den jeweiligen Bedürfnissen an.
Das eigentliche Popup ist in den Tutorials von Tommy beschrieben:
https://mobirise-tutorials.com/LawyerM4 ... html#close
Ich hoffe Dir damit geholfen zu haben. Grüße und viel Erfolg!
Hubert