是或否使用jQuery确认框

Question

我希望使用jQuery的是/否警报,而不是ok/Cancel按钮:

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

还有其他选择吗？

Answer 1

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

请找到演示.

Answer 2

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

使用确认功能:

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

Answer 3

我用过这些代码:

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>

这些代码对我有用,但我不确定这是否合适.你怎么看？

Answer 4

看看这个jQuery插件:jquery.confirm.

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

然后:

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

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

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

Answer 5

我见过的所有例子都不能用于不同的"是/否"类型问题.我正在寻找能够指定回调的东西,所以我可以调用任何情况.

以下对我来说效果很好:

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

Answer 6

我很难从对话框中得到答案，但最终通过结合其他问题的答案display-yes-and-no-buttons-instead-of-ok-and-cancel-in-confirm- 提出了一个解决方案带有模式确认对话框中的部分代码的框

这是针对另一个问题的建议：

创建您自己的确认框：

<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 函数中创建confirmBox div，就像 ThulasiRam 在他的回答中所做的那样。