Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Popover-JS-2.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>Bestätigung mit popover</title>
<style>
.fake-list {
border: thin solid gray;
margin-bottom: 1rem;
}
.list-item {
display: flex;
justify-content: space-between;
padding: 1rem;
border-bottom: thin solid #bbb;
}
.item-name {
font-size: 1.1rem;
font-weight: bold;
}
.item-meta {
font-size: .9rem;
color: gray;
}
button {
font-size: 1rem;
padding:0.5em;
background: #C0FFB1; }
.btn-danger {
background: #FFB1B1;
}
.tag {
display: inline-block;
font-size: .8rem;
padding: .3rem;
border-radius: .3rem;
margin-left: .3rem;
vertical-align: middle;
}
.tag-old {
background: #FAECE7;
color: #993C1D;
}
.tag-new {
background: #EAF3DE;
color: #3B6D11;
}
[popover] {
padding: 1rem;
border: thin solid #e7c157;
background: #fffbf0;
}
[popover]::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.popover-icon {
width: 2rem;
height: 2rem;
}
body {
font-family: sans-serif;
background-color: #dae9f2;
}
</style>
</head>
<body>
confirm() durch ein natives Popover ersetzen — Eintrag löschen bestätigen
Eintrag löschen
Einstellungen speichern
Projektbericht Q1
<button class="btn btn-danger" onclick="window.confirm('Projektbericht Q1 wirklich löschen?') ?
setResult('Gelöscht: Projektbericht Q1') : setResult('Abgebrochen')">
Löschen confirm()
</button>
<button class="btn btn-danger" onclick="openPopover('Projektbericht Q1')"> Löschen showPopover() </button>
Budgetplanung 2025
<button class="btn btn-danger" onclick="window.confirm('Budgetplanung 2025 wirklich löschen?') ?
setResult('Gelöscht: Budgetplanung 2025') : setResult('Abgebrochen')">
Löschen confirm()
</button>
<button class="btn btn-danger" onclick="openPopover('Budgetplanung 2025')"> Löschen showPopover() </button>
Meetingnotizen März
<button class="btn btn-danger"
onclick="window.confirm('Meetingnotizen März wirklich löschen?') ?
setResult('Gelöscht: Meetingnotizen März') : setResult('Abgebrochen')">
Löschen confirm()
</button>
<button class="btn btn-danger" onclick="openPopover('Meetingnotizen März')"> Löschen showPopover() </button>
Klicke einen Löschen-Button …
</div>
Eintrag löschen?
Diese Aktion kann nicht rückgängig gemacht werden.
<button class="btn"
onclick="document.getElementById('popover-confirm').hidePopover(); setResult('Abgebrochen')">Abbrechen</button>
<button class="btn btn-danger" id="popover-confirm-btn">Löschen</button>
<script> let currentItem = ;
function setResult(text) {
document.getElementById('result-box').textContent = text;
}
function openPopover(name) {
currentItem = name;
document.getElementById('popover-title').textContent = '\u201E' + name + '\u201C löschen?';
document.getElementById('popover-body').textContent = '\u201E' + name + '\u201C wird dauerhaft entfernt. Diese Aktion kann nicht rückgängig gemacht werden.';
document.getElementById('popover-confirm').showPopover();
}
document.getElementById('popover-confirm-btn').addEventListener('click', function () {
document.getElementById('popover-confirm').hidePopover();
setResult('Gelöscht: ' + currentItem);
});
</script>
</body>
</html>
