Hộp xác nhận Có hoặc Không sử dụng jQuery

Tôi muốn có / Không cảnh báo bằng jQuery, thay vì nút ok / Cancel:

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

Bất kỳ lựa chọn thay thế nào khác?

Phương thức cảnh báo chặn thực thi cho đến khi người dùng đóng nó:

sử dụng chức năng xác nhận:

if (confirm('Some message')) {
    alert('Thanks for confirming');
} else {
    alert('Why did you press cancel? You should have confirmed');
}

Tôi đã sử dụng các mã này:

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>

Những mã này phù hợp với tôi, nhưng tôi không thực sự chắc chắn liệu điều này có phù hợp hay không. Bạn nghĩ sao?

Hãy xem plugin jQuery này: jquery.confirm .

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

và sau đó:

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

Thao tác này sẽ hiển thị một cửa sổ bật lên xác nhận trước khi tiếp tục theo liên kết.

Có một bản demo ở đây: http://myclabs.github.com/jquery.confirm/

Tất cả các ví dụ tôi đã thấy đều không thể sử dụng lại cho các câu hỏi loại "có / không" khác nhau. Tôi đang tìm kiếm thứ gì đó cho phép tôi chỉ định một cuộc gọi lại để tôi có thể gọi cho bất kỳ tình huống nào.

Những điều sau đây đang hoạt động tốt đối với tôi:

$.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");
}
});

Sau đó tôi gọi nó như thế này:

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

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

Tôi đã gặp sự cố khi lấy lại câu trả lời từ hộp thoại nhưng cuối cùng đã tìm ra giải pháp bằng cách kết hợp câu trả lời từ câu hỏi khác này hiển thị-có-và-không-nút-thay-thế-của-ok-và-hủy-trong-xác nhận- hộp có một phần mã từ hộp thoại xác nhận phương thức

Đây là những gì được đề xuất cho câu hỏi khác:

Tạo hộp xác nhận của riêng bạn:

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

Tạo confirm()phương pháp của riêng bạn :

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

Gọi nó bằng mã của bạn:

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

NHỮNG THAY ĐỔI CỦA TÔI Tôi đã điều chỉnh ở trên để thay vì gọi confirmBox.show() tôi sử dụng confirmBox.dialog({...}) như thế này

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

Thay đổi khác mà tôi đã thực hiện là tạo div confirmBox trong hàm doConfirm, giống như ThulasiRam đã làm trong câu trả lời của mình.

Tôi cần áp dụng bản dịch cho các nút Ok và Cancel. Tôi đã sửa đổi mã thành ngoại trừ văn bản động (gọi hàm dịch của tôi)

$.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);
    }
});

Hãy thử cách này ... Nó rất đơn giản chỉ cần sử dụng hộp thoại xác nhận để cảnh báo với YES | NO.

if (xác nhận ("Bạn có muốn nâng cấp không?")) {Mã của bạn}

Bạn có thể sử dụng lại xác nhận của mình:

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