使用 jQuery 的“是”或“否”确认框

我希望使用 jQuery 而不是 ok/Cancel 按钮获得是/否通知:

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

还有别的选择吗?

755650 次浏览

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>

我很难从对话框中得到答案,但最终想出了一个解决方案,将来自另一个问题 在确认框中显示“是”和“否”按钮,而不是“确定”和“取消”按钮的答案与来自模式确认对话框的部分代码相结合

下面是对另一个问题的建议:

创建自己的确认框:

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

创建自己的 confirm()方法:

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

我的改变 我已经调整了以上内容,因此我没有调用 confirmBox.show(),而是像这样使用了 confirmBox.dialog({...})

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

我做的另一个更改是在 doConfirm 函数中创建 firmBox div,就像 ThulasiRam 在他的答案中所做的那样。

我看到的所有示例都不能用于不同的“是/否”类型的问题。我正在寻找一些东西,它允许我指定一个回调,这样我就可以在任何情况下调用。

以下几点对我来说很有效:

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

然后我这样称呼它:

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


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

看看这个 jQuery 插件: 查询,确认

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

然后:

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

这将在继续跟踪链接之前显示一个确认弹出窗口。

这里有一个演示: http://myclabs.github.com/jquery.confirm/

Alert 方法会阻止执行,直到用户关闭它:

使用确认功能:

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

我用过这些密码:

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>

这些密码对我有用,但我不确定这是否合适,你觉得呢?

您可以重复使用您的确认:

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

我需要应用一个翻译的确定和取消按钮。我将代码修改为除了动态文本(调用我的翻译函数)


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

尝试这个... 这是非常简单的只是使用确认对话框提醒与是 | 否。

如果(确认(“是否要升级?”){ 你的密码 }