"हां" और "नहीं" विकल्पों के साथ एक संवाद कैसे बनाएं?


658

मैं एक कार्रवाई करने और डेटाबेस में डेटा को बचाने के लिए एक बटन बनाने जा रहा हूं।

उपयोगकर्ता बटन पर क्लिक करने के बाद, मैं "हाँ" और "रद्द करें" विकल्पों की पेशकश करने के लिए एक जावास्क्रिप्ट चेतावनी चाहता हूं। यदि उपयोगकर्ता "हाँ" का चयन करता है, तो डेटा डेटाबेस में डाला जाएगा, अन्यथा कोई कार्रवाई नहीं की जाएगी।

मैं ऐसे संवाद कैसे प्रदर्शित करूं?


2
@ साज़ीन सुंदर मृत सरल और अच्छी शैली हाँ / नहीं। मुझे XUL डायलॉग्स से भी नफरत है क्योंकि इतनी सारी चीजें फ्रीज हो जाती हैं। बहुत बहुत धन्यवाद।
m3nda 10

जवाबों:


1246

आप शायद खोज रहे हैं confirm(), जो एक संकेत और रिटर्न प्रदर्शित करता है trueया falseउपयोगकर्ता द्वारा तय किए गए के आधार पर:

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}


125
पुष्टिकरण में OK और CANCEL बटन हैं। क्या ये बटन YES / NO पर सेट किए जा सकते हैं?
ओवेन

16
@ ओवेन नंबर । युक्ति कहती है कि आपको केवल एक संदेश देना है। आप HTML में एक संवाद का अनुकरण कर सकते हैं (हालांकि यह बिल्ट-इन की तरह ब्लॉक नहीं होगा)। jQuery डायलॉग इस तरह की चीज़ को लागू करने का एक अच्छा उदाहरण है।
s4y

3
नोट: आप returnदूसरे के अंदर डाल सकते हैं और फिर आपको पुष्टि में अपने सभी कोड को लपेटने की आवश्यकता नहीं है! (केस फिक्स से मामला हालांकि)
जैकब रेकुआ

21
@ जेकोबरासुइया या बसif(!confirm('message')) return;
आरोन

1
@ इसे वर्तमान में अनुकूलित करने का कोई तरीका नहीं है। इसीलिए कुछ वेबसाइट देशी के बजाय कस्टम, इन-पेज डायलॉग का इस्तेमाल करती हैं।
s4y

90
var answer = window.confirm("Save data?")
if (answer) {
    //some code
}
else {
    //some code
}

window.confirmअलर्ट के बजाय उपयोग करें । यह उस कार्यक्षमता को प्राप्त करने का सबसे आसान तरीका है।


15
आप if(confirm("...")){इसके बजाय भी जा सकते हैं
निकोलस बौलियान

75

'इनलाइन' जावास्क्रिप्ट का उपयोग करके यह कैसे करें:

<form action="http://www.google.com/search">
  <input type="text" name="q" />
  <input type="submit" value="Go"
    onclick="return confirm('Are you sure you want to search Google?')"
  />
</form>

5
फॉर्म की ऑनसाइट घटना को संभालना बेहतर है: आपके कोड के साथ, यदि उपयोगकर्ता पाठ में प्रवेश करता है, तो फॉर्म बिना किसी अनुरोध के सबमिट हो जाता है!
p91paul

1
@ p91paul - यह कौन सा ब्राउज़र आपके लिए विफल है? मैंने सिर्फ IE, क्रोम, और सफारी पर विंडोज में एंटर दबाने की कोशिश की और यह उम्मीद के मुताबिक काम किया। jsfiddle.net/ALjge/1
dana

खैर, मुझे यकीन था कि मैं क्या कह रहा था, लेकिन मैंने परीक्षण नहीं किया और मैं गलत था। माफ़ करना!
p91paul

1
कोई समस्या नहीं है :) आमतौर पर एक बिल्ली की त्वचा के लिए एक से अधिक तरीके हैं। मैं सिर्फ यह पुष्टि करना चाहता था कि मेरा दृष्टिकोण काम कर रहा है। <form onsubmit="...">आपके द्वारा सुझाए गए कार्यों का उपयोग करते हुए भी :)
दाना

41

इनलाइन जावास्क्रिप्ट से बचें - व्यवहार को बदलने का मतलब कोड के हर उदाहरण को संपादित करना होगा, और यह बहुत अच्छा नहीं है!

एक बहुत क्लीनर तरीका तत्व पर एक डेटा विशेषता का उपयोग करना है, जैसे कि data-confirm="Your message here"। नीचे दिया गया मेरा कोड डायनामिक-जनित तत्वों सहित निम्नलिखित क्रियाओं का समर्थन करता है:

  • aऔर buttonक्लिक करता है
  • form प्रविष्टियों पर
  • option चयन

jQuery:

$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});

HTML:

<!-- hyperlink example -->
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a>

<!-- button example -->
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button>

<!-- form example -->
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?">
    <button type="submit">Submit</button>
</form>

<!-- select option example -->
<select>
    <option>Select an option:</option>
    <option data-confirm="Are you want to select this option?">Here</option>
</select>

JSFiddle डेमो


2
बहुत साफ समाधान मैंने पहले नहीं सोचा था। हालांकि और भी अधिक संक्षिप्त हो सकता है:$("[data-confirm]").on('click,submit', function() { /* ... */ })
डेस्पेयर का ग्रिमेस

क्षमा करें, फिर से इसे देखने का विरोध नहीं कर सका। पहला: घटनाओं को एक स्थान से अलग किया जाना चाहिए। दूसरा: आप अभी भी कोड को कस सकते हैं jsfiddle.net/jguEg ;)
निराशा का केंद्र

@GrimaceofDespair मैंने कोड अपडेट कर लिया है, क्योंकि क्लिक करने और type="button"फिर पुष्टि करने के बाद उपयोगकर्ता द्वारा फ़ॉर्म सबमिट करना चाहते हैं (क्योंकि आप एक फॉर्म एलिमेंट क्लिक कर रहे हैं), जो स्पष्ट रूप से फिर से ओके पर क्लिक करने के बाद नहीं हुआ।
rybo111

ये अच्छे उदाहरण हैं, हालांकि वे सभी पुष्टिकरण () संवाद का उपयोग करते हैं ताकि आप रद्द / ठीक बटन का नाम नहीं बदल सकें: |
16

@rogerdpack हाँ, लेकिन डेटा विशेषताओं का उपयोग करने का सौंदर्य यह है confirm()कि आप HTML को बदले बिना जो चाहें बदल सकते हैं ।
rybo111

22

आपको कस्टोम कन्फर्मबॉक्स बनाना है, पुष्टिकरण फ़ंक्शन द्वारा प्रदर्शित संवाद में बटन बदलना संभव नहीं है।

jQuery confirmBox


इस उदाहरण को देखें: https://jsfiddle.net/kevalbhatt18/6uauqLn6/

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

इसे अपने कोड से कॉल करें:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

** शुद्ध जावास्क्रिप्ट पुष्टि बॉक्स **


उदाहरण : http://jsfiddle.net/kevalbhatt18/qwkzw3rg/127/

<div id="id_confrmdiv">confirmation
    <button id="id_truebtn">Yes</button>
    <button id="id_falsebtn">No</button>
</div>

<button onclick="doSomething()">submit</button>

स्क्रिप्ट :

<script>

function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line


document.getElementById('id_truebtn').onclick = function(){
   //do your delete operation
    alert('true');
};

document.getElementById('id_falsebtn').onclick = function(){
     alert('false');
   return false;
};
}
</script>

सीएसएस :

body { font-family: sans-serif; }
#id_confrmdiv
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#id_confrmdiv button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#id_confrmdiv .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}


2
इतना अच्छा भी .. बहुत सरल, शुद्ध जावास्क्रिप्ट और इतना सीएसएस नहीं। इसे पसंद करें: D
m3nda

एक आइटम दबाए जाने के बाद पुष्टि करें कि बक्से गायब हो जाएं। इसके अलावा, आपको कक्षाओं का उपयोग करना चाहिए, न कि आईडी का।
rybo111

@rogerdpack मैंने अपडेट की गई फ़िडल मुझे बताती है कि क्या मेरी तरफ से किसी चीज़ की ज़रूरत है :)
भट्ट

@rogerdpack अगर आपको जवाब पसंद है तो आप वोट कर सकते हैं: P
भट्ट

@ केवलाभट्ट, मुझे आपका 'शुद्ध जेएस' संस्करण पसंद है। क्या बटन दबाने के बाद / जो भी डायलॉग है उसे हटाने / छिपाने का कोई तरीका है? यदि मैं document.getElementById('id_confrmdiv').style.display="none";एक बटन के लिए विधि में निष्पादित सभी आदेशों के बाद संवाद छिपा रहा हूं ।
एंड्री मुजिकुक २


8

या केवल:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>

1
धन्यवाद! मुझे डर था कि मुझे अपने साधारण CRUD ऐप में jQuery को शामिल करना होगा बस एक सरल करने के लिए आप यह सुनिश्चित करते हैं कि आप इसे हटाना चाहते हैं।
विल मैथेसन

7

आप onSubmitइवेंट को JS को इंटरसेप्ट कर सकते हैं । फिर एक पुष्टिकरण चेतावनी को कॉल करें और फिर परिणाम को पकड़ो।


5

ऐसा करने का एक और तरीका:

$("input[name='savedata']").click(function(e){
       var r = confirm("Are you sure you want to save now?");

       //cancel clicked : stop button default action 
       if (r === false) {
           return false;
        }

        //action continues, saves in database, no need for more code


   });

5

वेनिला जावास्क्रिप्ट का उपयोग करते हुए यह एक पूर्ण उत्तरदायी समाधान है:

// Call function when show dialog btn is clicked
document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
var overlayme = document.getElementById("dialog-container");

function show_dialog() {
 /* A function to show the dialog window */
    overlayme.style.display = "block";
}

// If confirm btn is clicked , the function confim() is executed
document.getElementById("confirm").onclick = function(){confirm()};
function confirm() {
 /* code executed if confirm is clicked */   
    overlayme.style.display = "none";
}

// If cancel btn is clicked , the function cancel() is executed
document.getElementById("cancel").onclick = function(){cancel()};
function cancel() {
 /* code executed if cancel is clicked */  
    overlayme.style.display = "none";
}
.popup {
  width: 80%;
  padding: 15px;
  left: 0;
  margin-left: 5%;
  border: 1px solid rgb(1,82,73);
  border-radius: 10px;
  color: rgb(1,82,73);
  background: white;
  position: absolute;
  top: 15%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
  font-weight: 700;
  text-align: center;
}

.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display :none;
}

@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 80%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

.dialog-btn {
  background-color:#44B78B;
  color: white;
  font-weight: 700;
  border: 1px solid #44B78B;
  border-radius: 10px;
  height: 30px;
  width: 30%;
}
.dialog-btn:hover {
  background-color:#015249;
  cursor: pointer;
}
<div id="content_1" class="content_dialog">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>

<button id="btn-show-dialog">Ok</button>


<div class="overlay" id="dialog-container">
  <div class="popup">
    <p>This will be saved. Continue ?</p>
    <div class="text-right">
      <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
      <button class="dialog-btn btn-primary" id="confirm">Ok</button>
    </div>
  </div>
</div>


3

xdialog एक साधारण API xdialog.confirm () प्रदान करता है। कोड स्निपेट निम्नलिखित है। अधिक डेमो यहां पाया जा सकता है

document.getElementById('test').addEventListener('click', test);

function test() {
  xdialog.confirm('Are you sure?', function() {
    // do work here if ok/yes selected...
    console.info('Done!');
  }, {
    style: 'width:420px;font-size:0.8rem;',
    buttons: {
      ok: 'yes text',
      cancel: 'no text'
    },
    oncancel: function() {
      console.warn('Cancelled!');
    }
  });
}
<link href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<button id="test">test</button>


आप इसका वर्णन करेंगे कि आपका क्या मतलब है // do work here..। कार्यों के लिए YES TEXTऔर NO TEXTवहाँ जाना है?
केव

1
जब उपयोगकर्ता ठीक बटन का चयन करता है, तो @vv, कॉलबैक निष्पादित किया जाएगा।
xia xiongjun

और NO TEXTजाने के लिए तर्क कहाँ है ?
केव

आप oncancelअंतिम पैरामीटर विकल्पों में से एक विकल्प जोड़ सकते हैं xdialog.confirm(text, onyes, options)। अधिक जानकारी के लिए देखें: xdialog default-options
xia xiongjun

-2
document.getElementById("button").addEventListener("click", function(e) {
   var cevap = window.confirm("Satın almak istediğinizden emin misiniz?");
   if (cevap) {
     location.href='Http://www.evdenevenakliyat.net.tr';       
   }
});

मुझे क्षमा करें, स्पेनिश?
zixuan
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.