Beispiel:Popover-JS-1.html
Aus SELFHTML-Wiki
<!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>
<h1><code>alert()</code> durch ein natives Popover ersetzen</h1>
<h2>Einstellungen speichern</h2>
<p>
<label>Anzeigename:</label>
<input type="text" value="Ada Lovelace">
</p>
<p>
<label>E-Mail:</label>
<input type="email" value="ada@example.com">
</p>
<p>
<button class="btn" onclick="window.alert('Gespeichert!')"> Speichern <span class="tag tag-old">alert()</span> </button>
<button class="btn" id="save" > Speichern <span class="tag tag-new">showPopover()</span> </button>
</p>
<div id="popover-alert" popover>
<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>
<h3>Gespeichert!</h3>
<p>Deine Einstellungen wurden erfolgreich übernommen.</p>
<p>
<button class="btn" id="close" >OK</button>
</p>
</div>
</body>
</html>
