예 또는 아니오 jQuery를 사용하여 확인 상자


121

확인 / 취소 버튼 대신 jQuery를 사용하여 예 / 아니요 경고를 원합니다.

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

다른 대안이 있습니까?



jQuery UI를 살펴보십시오 : jqueryui.com/demos/dialog/#modal-confirmation
jAndy


3
$ .alerts.okButton = '예'; $ .alerts.cancelButton = '아니요'; jConfirm ( 'Are you sure ??', '', function (r) {if (r == true) {// Ok 버튼을 눌렀습니다 ...}}
Sushanth CS

2
확인 () 함수와 같은 또 다른 JQuery Dialog 솔루션은 다음을 반환합니다. stackoverflow.com/a/18474005/1876355 이것이 도움이
Pierre

답변:


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>


2
이 jquery-ui 또는 일반 오래된 jquery입니까? jQuery의 문서화에서 .dialog ()를 볼 수 없습니다.
chovy

11
페이지에 jquery 및 jquery ui 스크립트를 포함해야합니다.
Thulasiram

@Thulasiram yii2프레임 워크에 플러그인을 어떻게 추가 할 수 있습니까?
Faisal

113

경고 메서드는 사용자가 닫을 때까지 실행을 차단합니다.

확인 기능을 사용하십시오.

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

3
confirm"예 아니오"가 아니라 "OK CANCEL"입니다.
KlaymenDK

57

다음 코드를 사용했습니다.

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>

이 코드는 저에게 효과적이지만 이것이 적절한 지 확실하지 않습니다. 어떻게 생각해?


3
이것은 나를 위해 작동if(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
파이잘

더 짧게 return confirm("Are you sure you want to return this meter?")))
Павел Зорин


12

내가 본 모든 예는 다른 "예 / 아니오"유형 질문에 재사용 할 수 없습니다. 어떤 상황에서도 전화 할 수 있도록 콜백을 지정할 수있는 무언가를 찾고있었습니다.

다음은 나를 위해 잘 작동합니다.

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

4

나는 대화 상자에서 답을 얻는 데 어려움을 겪었지만 결국이 다른 질문의 답을 결합하여 해결책을 찾았습니다. 상자 모달-확인 대화 상자에서 코드의 일부와 함께

이것은 다른 질문에 대해 제안 된 것입니다.

자신의 확인 상자를 만듭니다.

<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를 만드는 것입니다.


0

확인 및 취소 버튼에 번역을 적용해야했습니다. 동적 텍스트를 제외하도록 코드를 수정했습니다 (내 번역 기능 호출).


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


0

시도해보십시오 ... YES | NO로 경고를 위해 확인 대화 상자를 사용하는 것은 매우 간단합니다.

if (confirm ( "업그레이드 하시겠습니까?")) {코드}


-3

확인을 재사용 할 수 있습니다.

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

2
올바른 영어를 사용하고 "u"와 같은 약어를 사용하지 마십시오. 또한 OP를 설명하고 교육하기 위해 코드를 약간 설명하고 이전에 게시 한 것보다 답이 더 낫다고 생각하는 이유를 설명 할 수 있으면 더 좋습니다.
Davidmh
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.