확인 / 취소 버튼 대신 jQuery를 사용하여 예 / 아니요 경고를 원합니다.
jQuery.alerts.okButton = 'Yes';
jQuery.alerts.cancelButton = 'No';
jConfirm('Are you sure??', '', function(r) {
if (r == true) {
//Ok button pressed...
}
}
다른 대안이 있습니까?
답변
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>
답변
경고 메서드는 사용자가 닫을 때까지 실행을 차단합니다.
확인 기능을 사용하십시오.
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();
}
}
});
내가 만든 다른 변경 사항은 ThulasiRam이 답변에서 한 것처럼 doConfirm 함수 내에서 confirmBox div를 만드는 것입니다.
답변
확인 및 취소 버튼에 번역을 적용해야했습니다. 동적 텍스트를 제외하도록 코드를 수정했습니다 (내 번역 기능 호출).
$.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);
}
});