CSS और JavaScript से डिलीट कन्फर्मेशन मॉडल कैसे बनाएं?

डिलीट कन्फर्मेशन मॉडल

CSS और JavaScript से डिलीट कन्फर्मेशन मॉडल बनाने का कोड:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { font-family: Arial, Helvetica, sans-serif; }
    .modal {
      text-align: center; display: none;
      position: fixed; z-index: 1; padding-top: 100px;
      left: 0; top: 0; width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .modalContent {
      font-size: 20px; font-weight: bold;
      background-color: #fefefe; margin: auto; padding: 20px;
      border: 1px solid #888; width: 80%; max-width: 500px;
    }
    .close {
      color: rgb(255, 65, 65); float: right;
      font-size: 40px; font-weight: bold;
    }
    .close:hover, .close:focus { color: #ff1010; cursor: pointer; }
    .modalContent button {
      border: none; border-radius: 4px; font-size: 18px;
      font-weight: bold; padding: 10px; margin: 5px;
    }
    .del { background-color: rgb(255, 65, 65); color: white; }
    .del:hover { background-color: rgb(255, 7, 7); }
    .cancel { background-color: #e0e0e0; color: #333; }
    .cancel:hover { background-color: rgb(167, 167, 167); }
  </style>
</head>
<body>
  <h1>मॉडल उदाहरण</h1>
  <button class="openModal">मॉडल खोलें</button>
  <h2>ऊपर के बटन पर क्लिक करके मॉडल खोलें</h2>
  
  <div class="modal">
    <div class="modalContent">
      <span class="close">×</span>
      <p>क्या आप वाकई अपना अकाउंट डिलीट करना चाहते हैं?</p>
      <button class="del" onclick="hideModal()">अकाउंट डिलीट करें</button>
      <button class="cancel" onclick="hideModal()">कैंसल</button>
    </div>
  </div>
  
  <script>
    var modal = document.querySelector(".modal");
    var btn = document.querySelector(".openModal");
    var span = document.querySelector(".close");
    
    btn.addEventListener("click", () => { modal.style.display = "block"; });
    span.addEventListener("click", () => { hideModal(); });
    
    function hideModal() { modal.style.display = "none"; }
    
    window.onclick = function(event) {
      if (event.target == modal) { hideModal(); }
    };
  </script>
</body>
</html>

आउटपुट

• प्रारंभ में: "मॉडल खोलें" बटन
• क्लिक करने पर: लाल "अकाउंट डिलीट करें" और ग्रे "कैंसल" बटन्स के साथ कन्फर्मेशन डायलॉग
• दोनों बटन मॉडल बंद करते हैं (वास्तविक डिलीशन लॉजिक जोड़ें)

सुधार: वास्तविक डिलीशन हैंडलिंग

function confirmDelete(userId) {
  const modal = document.querySelector(".modal");
  const confirmBtn = modal.querySelector(".del");
  const cancelBtn = modal.querySelector(".cancel");
  
  // पुराने हैंडलर्स हटाएं
  const newConfirm = confirmBtn.cloneNode(true);
  const newCancel = cancelBtn.cloneNode(true);
  confirmBtn.parentNode.replaceChild(newConfirm, confirmBtn);
  cancelBtn.parentNode.replaceChild(newCancel, cancelBtn);
  
  newConfirm.onclick = async () => {
    try {
      await fetch(`/api/users/${userId}`, { method: 'DELETE' });
      alert('अकाउंट डिलीट हो गया');
      hideModal();
    } catch (err) { alert('त्रुटि: ' + err); }
  };
  newCancel.onclick = hideModal;
  
  modal.style.display = 'block';
}

एक्सेसिबिलिटी

• role="alertdialog" aria-modal="true"
• aria-labelledby टाइटल के लिए, aria-describedby मैसेज के लिए
• फोकस ट्रैपिंग, ESC से बंद
• खतरनाक एक्शन के लिए लाल बटन, डिफ़ॉल्ट फोकस कैंसल पर