Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Beispiel:Popover-JS-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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>

prompt() durch ein natives Popover ersetzen — Teammitglied hinzufügen

Teammitglied hinzufügen

Team

  • AL Ada Lovelace Engineering
  • GH Grace Hopper Engineering

Klicke einen „Hinzufügen"-Button …

<button onclick="var n=window.prompt('Name des neuen Mitglieds:'); n && n.trim() ? addMember(n.trim(), 'prompt') : null"> + Hinzufügen prompt() </button> <button data-action="open-popover"> + Hinzufügen showPopover() </button>

Mitglied hinzufügen

 <label for="name-input">Name</label>
 <input id="name-input">

 <label for="role-input">Rolle</label>
 <input id="role-input">

<button data-action="close-popover">Abbrechen</button> <button data-action="confirm-add">Hinzufügen</button>


<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 = `
     ${initials(name)}
     
       ${name}
       ${role || '–'}
     
   `;

   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 action = e.target.closest('[data-action]')?.dataset.action;
 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>

Abgerufen am 25.04.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Popover-JS-3.html"