Beispiel:Popover-JS-3.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 prompt()</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;
}
.tag-new { background: #EAF3DE; color: #3B6D11; }
[data-action="close-popover"],
.close {background-color:#FFB1B1;}
label {width:7em; display:inline-block;}
body {
font-family: sans-serif;
background-color: #dae9f2;
}
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 1.25rem; border-bottom: 0.5px solid var(--color-border-tertiary); }
.list-item:last-child { border-bottom: none; }
.item-avatar { height: 2em; aspect-ratio:1;border-radius: 50%; border:thin solid #aaa;background: #ccc; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--color-text-info); flex-shrink: 0; margin-right: 10px; }
.item-info { flex: 1; }
.item-name { font-size: 14px; color: var(--color-text-primary); }
.item-role { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.btn:hover { opacity: 0.85; }
[popover] {
padding: 1rem;
border: thin solid #e7c157;
background: #fffbf0;
width:15em;
}
[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;
}
</style>
</head>
<body>
<h1><code>prompt()</code> durch ein natives Popover ersetzen</h1>
<h2>Teammitglied hinzufügen</h2>
<div id="member-list" class="member-list">
<h3>Team</h3>
<ul id="team-list">
<li class="list-item">
<span class="item-avatar">AL</span>
<span class="item-info">
<span class="item-name">Ada Lovelace</span>
<span class="item-role">Engineering</span>
</span>
</li>
<li class="list-item">
<span class="item-avatar">GH</span>
<span class="item-info">
<span class="item-name">Grace Hopper</span>
<span class="item-role">Engineering</span>
</span>
</li>
</ul>
<p>Klicke einen „Hinzufügen"-Button …</p>
<p>
<button onclick="var n=window.prompt('Name des neuen Mitglieds:'); n && n.trim() ? addMember(n.trim(), 'prompt') : null">
+ Hinzufügen <span class="tag tag-old">prompt()</span>
</button>
<button data-action="open-popover">
+ Hinzufügen <span class="tag tag-new">showPopover()</span>
</button>
</p>
<p id="result-box" aria-live="polite"></p>
</div>
<div id="popover-prompt" popover>
<h3>Mitglied hinzufügen</h3>
<p id="input-error" style="color:red;" role="alert"></p>
<label for="name-input">Name</label>
<input id="name-input">
<label for="role-input">Rolle</label>
<input id="role-input">
<p>
<button data-action="close-popover">Abbrechen</button>
<button data-action="confirm-add">Hinzufügen</button>
</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const popover = document.getElementById('popover-prompt');
const nameInput = document.getElementById('name-input');
const roleInput = document.getElementById('role-input');
const resultBox = document.getElementById('result-box');
const errorBox = document.getElementById('input-error');
const teamList = document.getElementById('team-list');
function initials(name) {
return name
.trim()
.split(' ')
.filter(Boolean)
.map(w => w[0].toUpperCase())
.slice(0, 2)
.join('');
}
function addMember(name, role) {
const li = document.createElement('li');
li.className = 'list-item';
li.innerHTML = `
<span class="item-avatar">${initials(name)}</span>
<span class="item-info">
<span class="item-name">${name}</span>
<span class="item-role">${role || '–'}</span>
</span>
`;
teamList.appendChild(li);
resultBox.textContent = `Hinzugefügt: ${name}${role ? ' · ' + role : ''}`;
}
function openPopover() {
errorBox.textContent = '';
nameInput.value = '';
roleInput.value = '';
popover.showPopover();
setTimeout(() => nameInput.focus(), 50);
}
function closePopover() {
popover.hidePopover();
resultBox.textContent = 'Abgebrochen';
}
function confirmAdd() {
const name = nameInput.value.trim();
const role = roleInput.value.trim();
if (!name) {
errorBox.textContent = 'Bitte einen Namen eingeben.';
nameInput.focus();
return;
}
popover.hidePopover();
addMember(name, role);
}
document.addEventListener('click', (e) => {
const btn = e.target.closest('[data-action]');
const action = btn ? btn.dataset.action : null;
if (!action) return;
switch (action) {
case 'open-popover':
openPopover();
break;
case 'close-popover':
closePopover();
break;
case 'confirm-add':
confirmAdd();
break;
}
});
window.addMember = addMember;
});
</script>
</body></html>
