使用 JavaScript 自定义确认对话框答案

【问题标题】：Custom confirm dialog with JavaScript使用 JavaScript 自定义确认对话框
【发布时间】：2012-06-05 04:50:26
【问题描述】：

我想创建一个类似于 confirm() 的 JavaScript 函数，它显示一个对话框（一个带有问题和 2 个按钮的 div），如果用户单击“确定”则返回 true，否则返回 false。

是否可以使用 JavaScript/jQuery 但不使用插件（例如 jQuery UI 或 Dialog）来做到这一点？因为我正在尝试减少尺寸和往返时间......

我试图编写这段代码，但我不知道如何让函数“等待”用户点击。

我想以这种方式使用我的功能：

answer=myConfirm("Are you sure?")

通过这种方式，我可以在多个上下文中使用相同的函数，只需更改作为参数传递的问题。这与confirm() 的行为相同

【问题讨论】：

可能感兴趣：window.showModalDialog().
您确实必须使用回调实现自定义确认对话框。您显示对话框，一旦用户单击按钮，就会调用回调函数。
必须为每个弹出窗口实例重新绑定/重新定义“是”和“否”按钮上的点击事件。如果您只定义它们一次，则单击事件无法将布尔值返回到最近的实例。这就是回调的目的，为“是/否”按钮提供一个可以在其中执行操作的上下文。

标签： javascript jquery dialog callback confirm

【解决方案1】：

与等待用户输入然后从函数返回相比，在 JavaScript 中更常见的是提供一个回调函数，当您等待的操作完成时将调用该回调函数。例如：

myCustomConfirm("Are you sure?", function (confirmed) {
    if (confirmed) {
        // Whatever you need to do if they clicked confirm
    } else {
        // Whatever you need to do if they clicked cancel
    }
});

这可以按照以下方式实现：

function myCustomConfirm(message, callback) {
    var confirmButton, cancelButton;

    // Create user interface, display message, etc.

    confirmButton.onclick = function() { callback(true); };
    cancelButton.onclick = function() { callback(false); };
}

【讨论】：

@supergiox：你仍然可以在不同的上下文中使用我描述的函数。唯一的区别是每次使用都不是写if (myConfirm(msg)) { … } else { … }，而是写myConfirm(msg, function (c) { if (c) { … } else { … } });
谢谢，它有效。我们甚至可以创建一个函数来显示更多按钮。默认情况下使用 0 和 1 作为 false 和 true 以及不同选项的其他数字。

【解决方案2】：

如果使用jQuery，为什么不实现jQueryUI？并使用Dialog函数如下：

作为 2 部分：

HTML

<div id="dialog-confirm" title="ALERT">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p>
</div>

脚本

$( "#dialog-confirm" ).dialog({
    resizable: false,
    modal: true,
    buttons: {
        "OK": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

全部在脚本中：

$(function() {
    $("<div />").attr("id", "dialog-confirm").append(
        $("<p />").text('Are you sure?').css("text-align", "center").prepend(
            $("<span />").addClass("ui-icon ui-icon-alert").css({
                float: 'left',
                margin: '0 7px 20px 0'
            })
        )
    ).dialog({
        resizable: false,
        modal: true,
        title: "ALERT",
        buttons: {
            "OK": function() {
                answer=1;
                $(this).dialog("close");
            },
            "Cancel": function() {
                answer=0;
                $(this).dialog("close");
            }
        }
    });
});

jsFiddle

【讨论】：

我想尽可能多地节省空间。如果没有“纯”javascript 方式，我将使用您的解决方案
您正在使用 jquery，但您想要“纯 javascript”......从那以后就没有了？如果是内存，jqueryui 是 jquery 的一个非常轻量级的扩展，但如果它是服务器内存，那么......它仍然是一个非常小的缩小文件。

【解决方案3】：

这确实应该通过回调来完成。最接近您所追求的是使用带有一些自定义事件的发布和订阅模型。

这样做：

当用户单击是按钮时，触发一个名为 clickedYes 的自定义事件。对“不”做同样的事情

$('#yesbtn').click(function(){
    $(document).trigger('clickedYes');
});

$('#nobtn').click(function(){
    $(document).trigger('clickedNo');
});

现在我们需要“监听”或订阅这些事件并在上下文中执行适当的操作。

让我们创建一个假设情况：您的用户点击删除，而您想要确认该选择。

如果他们点击是，首先设置你想要发生的事情：

$(document).unbind('clickedYes'); //Unbind any old actions
$(document).bind('clickedYes',function(){
    //Code to delete the item
    //Hide the popup
});

如果他们点击“否”，你想发生什么：

$(document).unbind('clickedNo'); //Unbind any old actions
$(document).bind('clickedNo',function(){
    //Hide the popup and don't delete
});

所以我们设置了监听 clickedYes 或 clickedNo 的操作。现在我们只需要向用户显示弹出窗口，以便他们必须单击是或否。当他们这样做时，他们将触发上述事件。

所以您的 myConfirm() 函数将执行以下操作：

function myConfirm(msg){
    //change the message to 'msg'
    //Show the popup
}

所以顺序是：

将自定义事件的触发器绑定到是和否按钮
提示之前 - 取消绑定任何旧操作并附加新操作
向用户展示一个弹出窗口，让他们触发您的操作。

这将允许您像这样调用函数 myConfirm('Are you sure');这不是你所追求的……但我认为不可能完全按照你的意愿去做。

【讨论】：