JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="emp, post: 13380, member: 4541"] Achja, display:flex hatte ich ausprobiert, da ließ sich dann das X nicht mehr rechts ausrichten. Ich Dodel habs aber danach absolut positioniert und das in Kombination mit display:flex funktioniert dann natürlich schon. Nur lässt sich das Modal dann wieder nicht mehr schließen wir vorhin bei display:table. Hilft hier also leider nicht. 6rem hat Lena wohl nicht umsonst eingestellt. Wenn das Modal keine Höhe hat (ich hab ja 40% gewählt), dann oben und unten genug Abstand, dann passt's automatisch. Aber richtig zentrieren lässt sich das wohl nicht, da das Modal sonst nach dem Schließen über JS per CSS trotzdem angezeigt wird. Dazu müsste man sonst über JS eine extra Klasse mit display:none; hinzufügen. Ist aber in dem Fall jetzt nicht nötig. Ähm...das X schließt ja das Modal. Ich red vom Overlay, das bleibt dann übrig. Ich hätte jetzt versucht, dem Overlay und dem Dialog die Klasse (nicht ID) modal zu geben und dann per JS sie per ClassName anzusteuern. Da kommt allerdings gar nichts mehr...versteh ich nicht. Ich hab aktuell folgendes: [CODE=HTML]<div id="modal-overlay"></div> <dialog id="modal"> <button id="close-modal"><i class="fas fa-times"></i></button><br> <p>Cookies gibt's bei uns nur dienstags beim Clubabend!<br> Du bist herzlich eingeladen vorbeizuschauen!</p> <br> </dialog>[/CODE] [CODE=javascript] //////// BEGIN OF MODAL setTimeout(function() { document.getElementById("modal").showModal(); }, 1000); // Verzögerung in Millisekunden document.getElementById("close-modal").addEventListener("click", () => { document.getElementById("modal").close(); }); //////// END OF MODAL[/CODE] [CODE=css]#modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 40%; background-color:#51AF2E; padding:0; border-radius:0px; border:none; z-index: 20; overflow-y:hidden; } #modal button { background: none; border: none; position:absolute; top:var(--nf-padding); right:var(--nf-padding); } .fa-times { font-size:2rem; color:white; } .fa-times:hover { color:#AE0009; } #modal p { font-family:'Museo Slab 500', 'Times', serif; color:#FFFFFF; font-size:2rem; line-height:1.3; padding:var(--nf-padding); hyphens: none; } #modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 19; }[/CODE] [/QUOTE]

Authentifizierung