मेरे पास एक बटन है जो मेरी साइट से उपयोगकर्ता की जानकारी को हटा देता है मैं कुछ जोड़ना चाहता हूं (एक अलर्ट की तरह) जो कहता है रद्द करें ... पुष्टि करें कि कोई संयोग नहीं होगा (संयोग से उपयोगकर्ता को हटाना) कृपया मेरी मदद करें thx

3
holyblast 12 जुलाई 2021, 11:30

2 जवाब

सबसे बढ़िया उत्तर

आप अपने स्वयं के css जनरेट किए गए पॉप-अप भी जोड़ सकते हैं।

इनके बारे में एक बात विशेष है और वह यह है कि ये अनुकूलन योग्य हैं। जैसे ही आप इन पॉप अप को स्वयं बनाते हैं, आप इसमें रंग और आकार मैन्युअल रूप से जोड़ सकते हैं।

और रंग चुनना सहायक होता है क्योंकि आप रंगों के आधार पर उपयोगकर्ताओं के निर्णय को प्रभावित कर सकते हैं।

उदाहरण के लिए- यदि आपने अपने डिलीट बटन के लिए लाल रंग चुना है तो उपयोगकर्ता उस बटन की ओर किसी प्रकार के संभावित खतरे/नकारात्मक कदम/कार्रवाई के रूप में चेतावनी देगा।

popup = document.getElementById('popup'); // gets the popup element from the document
deleteBtn = document.getElementById('deleteBtn');
function confirmDelete() {
  //your code for deleting the user-details goes here
  hide();
  deleteBtn.style.display = 'Block';
  deleteBtn.innerHTML = 'Yor Details Have Been Successfully Deleted...';
  deleteBtn.onclick = '';
}

function show(){
  popup.style.display = 'Block';
  deleteBtn.style.display = 'None';
}

function hide(){
  popup.style.display = 'None';
  deleteBtn.style.display = 'Block';
}
#popup{
  display: None;
  margin: 15px;
  padding: 10px;
  border: 2px Solid Red;
  text-align: center;
}

#popupMessage{
  color: Red;
  font-family: monospace;
}

#deleteBtn{
  padding:5px;
  background-color: rgba(200,23,23,0.5);  //using shagdes of red also signals the user of a potentially negative step
  color: rgba(255,255,255,0.7);
}

#confirm{
  padding:5px;
  background-color: rgba(200,23,23,0.5);  //using shagdes of red also signals the user of a potentially negative step
  margin: 5px;
  padding: 5px;
}

#cancel{
  color: rgba(255,25,255,1);
  padding:5px;
  background-color: rgba(20,255,23,0.5);  //using shagdes of green might signal the user of a potentially positive step
  margin: 5px;
  padding: 5px;
}
<!--code for the pop up -->
<div id='popup'>
  <span id='popupMessage'>Are you sure you want to delete your details..?</span><br/>
  <button id='confirm' onclick='confirmDelete()'>Confirm</button>
  <button id='cancel' onclick='hide()'>Cancel</button>
</div>
<!---->

<!--code for the delete button-->
<button id='deleteBtn' onclick='show()'>Delete</button>
<!---->

धन्यवाद क्योंकि आपके प्रश्न ने मुझे नई अवधारणाएं सीखने में मदद की।

मैंने पहले इस प्रश्न का उत्तर दिया था जिसमें आपके द्वारा पूछे गए प्रश्नों के बारे में पर्याप्त जानकारी थी और उस उत्तर को मॉडरेटर द्वारा मददगार रूप से संशोधित किया गया था, इस बीच मैंने सोचा कि मुझे खुद का पॉप अप बनाने के बारे में कुछ सीखना चाहिए इसलिए मैं इस नए उत्तर के साथ आया। आशा है कि यह मदद करता है .. .हैप्पी कोडिंग..:)

3
Ajay Singh Rana 12 जुलाई 2021, 10:31
  1. एक फॉर्म में नहीं एक बटन का उपयोग करना
document.getElementById("delete").addEventListener("click", function() {
  if (confirm("Are you sure?")) {
    console.log("Deleting");
    // code to delete
  }
  else {
    console.log("Cancelled");
  }
})
<button type="button" id="delete">Delete</button>
  1. एक फॉर्म में सबमिट बटन का उपयोग करना
document.getElementById("form1").addEventListener("submit", function(e) {
  if (confirm("Are you sure?")) {
    console.log("Deleting");
    // form is submitting here
  }
  else {
    console.log("Cancelled");
    e.preventDefault(); // cancelling submission
  }
})
<form id="form1" action="delete">
<button>Delete</button>
</form>
1
mplungjan 12 जुलाई 2021, 09:32