Да или Нет подтвердить окно с помощью jQuery
Я хочу да / нет оповещений, используя jQuery вместо кнопки ОК / Отмена:
jQuery.alerts.okButton = 'Yes';
jQuery.alerts.cancelButton = 'No';
jConfirm('Are you sure??', '', function(r) {
if (r == true) {
//Ok button pressed...
}
}
Есть ли другие альтернативы?
8 ответов
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();
}
});
};
Пожалуйста, найдите Демо.
Метод 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>
Эти коды работают для меня, но я не совсем уверен, что это правильно. Как вы думаете?
Взгляните на этот плагин jQuery: jquery.confirm.
<a href="home" class="confirm">Go to home</a>
а потом:
$(".confirm").confirm();
Это покажет всплывающее окно подтверждения, прежде чем перейти по ссылке.
Здесь есть демо: http://myclabs.github.com/jquery.confirm/
Все примеры, которые я видел, не подходят для разных вопросов типа "да / нет". Я искал что-то, что позволило бы мне указать обратный вызов, чтобы я мог позвонить в любой ситуации.
Следующее работает хорошо для меня:
$.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
);
У меня были проблемы с получением ответа из диалогового окна, но в конце концов я нашел решение, объединив ответ из этого другого вопроса: отображать-да-и-нет-кнопок-вместо-ок-и-отменить-в-подтверждении- окно с частью кода из диалогового окна модального подтверждения
Вот что было предложено для другого вопроса:
Создайте свой собственный ящик подтверждения:
<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();
}
}
});
Другое изменение, которое я сделал, заключалось в создании div validBox в функции doConfirm, как это сделал ThulasiRam в своем ответе.
Мне нужно было применить перевод к кнопкам Ok и Cancel. Я изменил код, за исключением динамического текста (вызывает мою функцию перевода)
$.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);
}
});
Попробуйте это... Это очень просто, просто используйте диалоговое окно подтверждения для предупреждения с YES | NO.
if (confirm ("Хотите обновить?")){Ваш код}
Вы можете повторно использовать свое подтверждение:
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);