Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Popover-JS-1.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0"> <link href="./Beispiel:Grundlayout.css" media="screen" rel="stylesheet"> <title>Infobox anstatt alert()</title>
<style> [popover] {
padding: 1rem; border: thin solid #e7c157; background: #fffbf0;
} [popover]::backdrop { background: rgba(0,0,0,0.4); } .popover-icon {
width: 2rem; height: 2rem;
} button {
background-color:oklch(70% 0.09 235); padding: 0.5em; font-size: 1.2em;
}
.tag-old { color: #c82f04;font-family: monospace; }
label {width:7em; display:inline-block;}
body {
font-family: sans-serif; background-color: #dae9f2;
} </style> <script> document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#save').addEventListener('click', async event => { // Formular speichern // await saveData(); document.querySelector('#popover-alert').showPopover(); });
document.querySelector('#close').addEventListener('click', event => { document.querySelector('#popover-alert').hidePopover(); });
}); </script>
</head>
<body>
alert() durch ein natives Popover ersetzen
Einstellungen speichern
<label>Anzeigename:</label> <input type="text" value="Ada Lovelace">
<label>E-Mail:</label> <input type="email" value="ada@example.com">
<button class="btn" onclick="window.alert('Gespeichert!')"> Speichern alert() </button> <button class="btn" id="save" > Speichern showPopover() </button>
<svg class="popover-icon" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9.5L7 13.5L15 5" stroke="#93b946" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </svg>
Gespeichert!
Deine Einstellungen wurden erfolgreich übernommen.
<button class="btn" id="close" >OK</button>
</body> </html>
