Ya atau Tidak kotak konfirmasi menggunakan jQuery

121

Saya ingin peringatan ya / Tidak menggunakan jQuery, alih-alih tombol ok / Batal:

jQuery.alerts.okButton = 'Yes';
jQuery.alerts.cancelButton = 'No';                  
jConfirm('Are you sure??',  '', function(r) {
    if (r == true) {                    
        //Ok button pressed...
    }  
}

Ada alternatif lain?

Sushanth CS
sumber
3
$ .alerts.okButton = 'Ya'; $ .alerts.cancelButton = 'Tidak'; jConfirm ('Are you sure ??', '', function (r) {if (r == true) {// tombol Ok ditekan ...}}
Sushanth CS
2
Solusi JQuery Dialog lainnya lebih seperti fungsi confirm () yang mengembalikan: stackoverflow.com/a/18474005/1876355 Semoga ini bisa membantu
Pierre

Jawaban:

129

ConfirmDialog('Are you sure');

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Delete message',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Yes: function() {
          // $(obj).removeAttr('onclick');                                
          // $(obj).parents('.Parent').remove();

          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');

          $(this).dialog("close");
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Thulasiram
sumber
2
apakah ini jquery-ui atau jquery biasa? Saya tidak melihat .dialog () di mana pun di documentaiton jQuery.
chovy
11
Anda perlu menyertakan skrip ui jquery dan jquery di halaman Anda.
Thulasiram
@ Thulasiram bagaimana cara menambahkan plugin dalam yii2kerangka?
Faisal
113

Metode peringatan memblokir eksekusi sampai pengguna menutupnya:

gunakan fungsi konfirmasi:

if (confirm('Some message')) {
    alert('Thanks for confirming');
} else {
    alert('Why did you press cancel? You should have confirmed');
}
Ana El Bembo
sumber
3
confirmadalah "OK CANCEL", bukan "YES NO".
KlaymenDK
57

Saya telah menggunakan kode-kode ini:

HTML:

<a id="delete-button">Delete</a>

jQuery:

<script>
$("#delete-button").click(function(){
    if(confirm("Are you sure you want to delete this?")){
        $("#delete-button").attr("href", "query.php?ACTION=delete&ID='1'");
    }
    else{
        return false;
    }
});
</script>

Kode-kode ini berfungsi untuk saya, tetapi saya tidak begitu yakin apakah ini benar. Bagaimana menurut anda?

pengguna3678239
sumber
3
Ini bekerja untuk sayaif(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
Faisal
Lebih pendek return confirm("Are you sure you want to return this meter?")))
Павел Зорин
28

Lihat plugin jQuery ini: jquery.confirm .

<a href="home" class="confirm">Go to home</a>

lalu:

$(".confirm").confirm();

Ini akan menampilkan popup konfirmasi sebelum melanjutkan untuk mengikuti tautan.

Ada demo di sini: http://myclabs.github.com/jquery.confirm/

Matthieu Napoli
sumber
12

Semua contoh yang saya lihat tidak dapat digunakan kembali untuk pertanyaan jenis "ya / tidak" yang berbeda. Saya sedang mencari sesuatu yang memungkinkan saya untuk menentukan panggilan balik sehingga saya dapat menelepon untuk situasi apa pun.

Berikut ini bekerja dengan baik untuk saya:

$.extend({ confirm: function (title, message, yesText, yesCallback) {
    $("<div></div>").dialog( {
        buttons: [{
            text: yesText,
            click: function() {
                yesCallback();
                $( this ).remove();
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).remove();
            }
        }
        ],
        close: function (event, ui) { $(this).remove(); },
        resizable: false,
        title: title,
        modal: true
    }).text(message).parent().addClass("alert");
}
});

Saya kemudian menyebutnya seperti ini:

var deleteOk = function() {
    uploadFile.del(fileid, function() {alert("Deleted")})
};

$.confirm(
    "CONFIRM", //title
    "Delete " + filename + "?", //message
    "Delete", //button text
    deleteOk //"yes" callback
);
MSquared
sumber
4

Saya mengalami kesulitan mendapatkan jawaban kembali dari kotak dialog tetapi akhirnya muncul dengan solusi dengan menggabungkan jawaban dari pertanyaan lain ini display-yes-and-no-buttons-bukannya-of-ok-and-cancel-in-confirm- kotak dengan bagian dari kode dari dialog konfirmasi modal

Inilah yang disarankan untuk pertanyaan lain:

Buat kotak konfirmasi Anda sendiri:

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

Buat confirm()metode Anda sendiri :

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();
}

Sebut dengan kode Anda:

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

PERUBAHAN SAYA Saya telah mengubah cara di atas sehingga alih-alih menelepon, confirmBox.show() saya menggunakan confirmBox.dialog({...}) seperti ini

confirmBox.dialog
    ({
      autoOpen: true,
      modal: true,
      buttons:
        {
          'Yes': function () {
            $(this).dialog('close');
            $(this).find(".yes").click();
          },
          'No': function () {
            $(this).dialog('close');
            $(this).find(".no").click();
          }
        }
    });

Perubahan lain yang saya buat adalah membuat div confirmBox dalam fungsi doConfirm, seperti yang dilakukan ThulasiRam dalam jawabannya.

JF
sumber
0

Saya perlu menerapkan terjemahan ke tombol Ok dan Batal. Saya mengubah kode menjadi kecuali teks dinamis (memanggil fungsi terjemahan saya)


$.extend({
    confirm: function(message, title, okAction) {
        $("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            width: 500,
            buttons: [{
                text: localizationInstance.translate("Ok"),
                click: function () {
                    $(this).dialog("close");
                    okAction();
                }
            },
                {
                text: localizationInstance.translate("Cancel"),
                click: function() {
                    $(this).dialog("close");
                }
            }],
            close: function(event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
    }
});

Jim
sumber
0

Coba Ini ... Sangat sederhana, cukup gunakan kotak dialog konfirmasi untuk peringatan dengan YES | NO.

if (konfirmasi ("Apakah Anda ingin meningkatkan?")) {Kode Anda}

rajan snuriya
sumber
-3

Anda dapat menggunakan kembali konfirmasi Anda:

    function doConfirm(body, $_nombrefuncion)
    {   var param = undefined;
        var $confirm = $("<div id='confirm' class='hide'></div>").dialog({
            autoOpen: false,
            buttons: {
                Yes: function() {
                param = true;
                $_nombrefuncion(param);
                $(this).dialog('close');
            },
                No: function() {
                param = false;
                $_nombrefuncion(param);
                $(this).dialog('close');
            }
                                    }
        });
        $confirm.html("<h3>"+body+"<h3>");
        $confirm.dialog('open');                                     
    };

// for this form just u must change or create a new function for to reuse the confirm
    function resultadoconfirmresetVTyBFD(param){
        $fecha = $("#asigfecha").val();
        if(param ==true){
              // DO THE CONFIRM
        }
    }

//Now just u must call the function doConfirm
    doConfirm('body message',resultadoconfirmresetVTyBFD);
thamaht
sumber
2
Harap gunakan bahasa Inggris yang benar dan hindari singkatan seperti "u". Juga, lebih baik jika Anda dapat menjelaskan sedikit kode Anda untuk menggambarkan dan mendidik OP, dan mengapa menurut Anda jawaban Anda lebih baik daripada yang diposting sebelumnya.
Davidmh