Beispiel:Popover-JS-2.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>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>

<h1><code>confirm()</code> durch ein natives Popover ersetzen — Eintrag löschen bestätigen</h1>

  <h2>Eintrag löschen</h2>

  <p>Einstellungen speichern</p>

  <div class="fake-list">

    <div class="list-item">
      <div>
        <div class="item-name">Projektbericht Q1</div>
        <div class="item-meta">zuletzt geändert: 12.04.2025</div>
      </div>
      <div class="btn-row">
        <button class="btn btn-danger" onclick="window.confirm('Projektbericht Q1 wirklich löschen?') ?
          setResult('Gelöscht: Projektbericht Q1') : setResult('Abgebrochen')">
          Löschen <span class="tag tag-old">confirm()</span>
        </button>
        <button class="btn btn-danger" onclick="openPopover('Projektbericht Q1')"> Löschen <span
            class="tag tag-new">showPopover()</span> </button>
      </div>
    </div>

    <div class="list-item">
      <div>
        <div class="item-name">Budgetplanung 2025</div>
        <div class="item-meta">zuletzt geändert: 03.03.2025</div>
      </div>
      <div class="btn-row">
        <button class="btn btn-danger" onclick="window.confirm('Budgetplanung 2025 wirklich löschen?') ?
          setResult('Gelöscht: Budgetplanung 2025') : setResult('Abgebrochen')">
          Löschen <span class="tag tag-old">confirm()</span>
        </button>
        <button class="btn btn-danger" onclick="openPopover('Budgetplanung 2025')"> Löschen <span
            class="tag tag-new">showPopover()</span> </button>
      </div>
    </div>

    <div class="list-item">
      <div>
        <div class="item-name">Meetingnotizen März</div>
        <div class="item-meta">zuletzt geändert: 28.02.2025</div>
      </div>
      <div class="btn-row">
        <button class="btn btn-danger" 
		onclick="window.confirm('Meetingnotizen März wirklich löschen?') ?
          setResult('Gelöscht: Meetingnotizen März') : setResult('Abgebrochen')">
          Löschen <span class="tag tag-old">confirm()</span>
        </button>
        <button class="btn btn-danger" onclick="openPopover('Meetingnotizen März')"> Löschen <span
            class="tag tag-new">showPopover()</span> </button>
      </div>
    </div>
    
  </div>
  
  <p id="result-box">Klicke einen Löschen-Button …</p>
  
  </div>
  
  <div id="popover-confirm" popover>
    <div class="popover-card">
      <div class="popover-icon">
        <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 3v6M9 13h.01" stroke="#A32D2D" stroke-width="2" stroke-linecap="round" />
        </svg>
      </div>
      <p class="popover-title" id="popover-title">Eintrag löschen?</p>
      <p class="popover-body" id="popover-body">Diese Aktion kann nicht rückgängig gemacht werden.</p>
      <div class="popover-actions">
        <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>
      </div>
    </div>
  </div>

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

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