確認ダイアログ

<button class="d09-02-07-trigger">項目を削除</button>
        <div class="d09-02-07-overlay">
          <div class="d09-02-07-dialog">
            <div class="d09-02-07-icon">
              <svg viewBox="0 0 24 24"><path d="M12 3l9 16H3z" fill="none"/><path d="M12 9v4" fill="none"/><circle cx="12" cy="16" r="1.1" fill="#e05252" stroke="none"/></svg>
            </div>
            <p class="d09-02-07-q">この項目を削除しますか?</p>
            <p class="d09-02-07-note">この操作は取り消せません。</p>
            <div class="d09-02-07-actions">
              <button class="d09-02-07-cancel">キャンセル</button>
              <button class="d09-02-07-ok">削除する</button>
            </div>
          </div>
        </div>

.d09-02-07-trigger{padding:10px 18px;border:none;border-radius:8px;background:#e05252;color:#fff;font-size:14px;font-weight:600;cursor:pointer}
        .d09-02-07-overlay{position:absolute;inset:0;background:rgba(20,24,33,.45);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s}
        .d09-02-07-overlay.d09-02-07-open{opacity:1;visibility:visible}
        .d09-02-07-dialog{background:#fff;border-radius:14px;padding:20px;width:230px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.28);transform:scale(.88);transition:transform .28s cubic-bezier(.2,.9,.3,1.3)}
        .d09-02-07-open .d09-02-07-dialog{transform:scale(1)}
        .d09-02-07-icon{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;background:#fdeaea;display:flex;align-items:center;justify-content:center}
        .d09-02-07-icon svg{width:24px;height:24px;stroke:#e05252;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-07-q{margin:0;font-size:15px;font-weight:700;color:#2c3140}
        .d09-02-07-note{margin:5px 0 14px;font-size:12px;color:#8a92a4}
        .d09-02-07-actions{display:flex;gap:8px}
        .d09-02-07-actions button{flex:1;padding:9px 0;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none}
        .d09-02-07-cancel{background:#eef0f4;color:#4a5162}
        .d09-02-07-ok{background:#e05252;color:#fff}

(function(){
        var root=document.getElementById('item-09-02-07');
        var ov=root.querySelector('.d09-02-07-overlay');
        var trig=root.querySelector('.d09-02-07-trigger');
        function close(){ov.classList.remove('d09-02-07-open');}
        trig.addEventListener('click',function(){ov.classList.add('d09-02-07-open');trig.textContent='項目を削除';});
        root.querySelector('.d09-02-07-cancel').addEventListener('click',close);
        root.querySelector('.d09-02-07-ok').addEventListener('click',function(){close();trig.textContent='削除しました';});
        ov.addEventListener('click',function(e){if(e.target===ov)close();});
      })();